Question

我正在将Webpack用于一个非常小的项目，其零生产依存关系。这是我的配置文件：

const HTMLWebpackPlugin = require("html-webpack-plugin");

const lifecyle = process.env.npm_lifecyle_event;

const mode = lifecyle === "start" ? "development" : "production";

const HTML = new HTMLWebpackPlugin({
    template: "./src/index.ejs"
});

const base = {
    mode,
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist/",
        filename: "app.min.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    devServer: {},
    plugins: [HTML]
};

const dev = {};

const prod = {};

if (mode === "development") {
    module.exports = Object.assign(base, dev);
} else {
    module.exports = Object.assign(base, prod);
}

一旦构建，项目大小为12kb，已删除。构建过程需要3秒钟，更改代码后重新编译大约需要5秒钟。

我不知道我在做什么，以使该项目如此缓慢。作为参考，使用React，Redux，PostCSS，babel等的专业项目最初需要大约8秒的时间来编译，但是一旦我对其进行处理，就只需一秒钟。

我怀疑Webpack的问题在于node_modules，因为我没有明确指定任何JS加载器，因此我没有告诉它要排除它。我注意到lodash似乎每次都会重新编译。

关于这可能是什么原因的任何想法？

Webpack 5s开发人员为非常小的项目编译时间

0 个答案: