javascript - 如何提高webpack的执行速度？

Question

实际上，我使用reactjs为我的网站编写了webpack。因为我有很多图像和 scss 文件，所以创建 bundle.js 文件需要花费更多时间，直到网站处于加载状态。那么，如何提高执行速度。

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let config = {
  entry: ["babel-polyfill", "./app/js/index.js"],
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "./build.js",
    //publicPath: "/"
  },
  resolve: {
    alias: {
      "js": path.resolve(__dirname, "app/js"),
      "css": path.resolve(__dirname, "app/css")
    },
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, loader: "babel-loader"},
      {
       test: /\.(eot|svg|ttf|woff|woff2)$/,
       loader: 'url-loader'
     },
      {test: /\.scss$/, loader: ExtractTextPlugin.extract(["css-loader", "sass-loader"])},
      {test: /\.(jpg|gif|png)$/, loader: "file-loader", options: {name: "./images/[name].[ext]"}},
    ]
  },

  devServer: {
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./app/index.html"
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        sassLoader: {
          includePaths: ["app/css"]
        }
      }
    }),
    new ExtractTextPlugin({
      filename: "style.css",
      allChunks: true
    })
  ]
};

if (process.env.NODE_ENV === "production") {
  config.plugins.push(
    new webpack.DefinePlugin({
      "process.env": {
        "NODE_ENV": JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  );
}

module.exports = config;

Answer 1

除了调整配置之外，您还可以使用 webpack --watch 让 webpack 监视您的源文件，并在您更改某些内容时重新编译。第一次编译仍然是完整的，但之后每次只会重新编译必要的部分，这可以将编译时间从 30 秒缩短到 1 或 2 秒。

更好的是设置 webpack 的 devserver通过热重新加载，它还会监视并增量编译，但此外还会在浏览器中更新您的应用程序，因此您不需要重新加载页面并失去 react 状态。设置起来可能有点挑剔，但这是值得的。