Webpack 4.0：生产配置不会创建 Bundle Chunk 文件

Question

我正在尝试优化项目的构建和包大小。但是，每当我运行 npm run build 它不会在我的 /dist 文件夹下创建任何 bundle chunk 文件。但是 npm run dev 在我的 /dist 文件夹下创建了一个包块就好了。两个 npm 脚本之间的唯一区别是 build 使用我的 webpack.prod 配置而 dev 使用我的 webpack.dev 配置。

我终端中 npm run build 的输出似乎表明它正在创建我指定的所有块（我为主包创建一个块，为每个节点模块创建一个块，以最小化用户的包每当我们更新项目时都需要下载）。

我不确定 Webpack 的生产模式中是否有一些默认行为导致了这种情况。

npm run build 输出：

这是我的两个 Webpack 配置文件：

Webpack.prod:

module.exports = env => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  return {
    mode: 'production',
    entry: ['babel-polyfill', 'react', 'react-dom', './src/Index.tsx'],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist/')
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
    watch: false,
    devServer: {
      contentBase: 'dist',
      port: 3000,
      historyApiFallback: true,
      inline: true,
      https: true
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          exclude: [
            /node_modules/,
          ],
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: [
            /node_modules/,
          ],
        },
        {
          test: /\.(png|gif|jpg|woff|eot|ttf|svg|woff2|ico)$/i,
          use: "file-loader?name=images/[name].[ext]",
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(config)$/,
          use: "file-loader?name=[name].[ext]"
        },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
        filename: "index.html",
      }),
      new TSLintPlugin({
        files: ['./src/**/*.ts']
      }),
      new CopyWebpackPlugin([
        { from: './src/favicon.ico' },
        { from: './data/*.json', to: path.resolve(__dirname, 'dist/'), force: true },
      ], {}),
      new Dotenv({
        path: finalPath
      })
    ]
  }
};

Webpack.dev:

module.exports = env => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  return {
    mode: 'development',
    devtool: "inline-source-map",
    entry: ['babel-polyfill', 'react', 'react-dom', './src/Index.tsx'],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist/')
    },
    resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
    watch: false,
    // Enable sourcemaps for debugging webpack's output.
    devServer: {
      contentBase: 'dist',
      historyApiFallback: true,
      inline: true,
      port: 3000,
      https: true
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    module: {
      rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
          test: /\.tsx?$/,
          loader: "ts-loader"
        },
        {
          test: /\.(png|gif|jpg|woff|eot|ttf|svg|woff2|ico)$/i,
          use: "file-loader?name=images/[name].[ext]",
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        {
          enforce: "pre",
          test: /\.js$/,
          loader: "source-map-loader",
          exclude: [/node_modules/, /build/, /__test__/],
        },
        {
          test: /\.(config)$/,
          use: "file-loader?name=[name].[ext]"
        },
        {
          test: /\.js$/,
          loader: 'babel-loader'
        }
      ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
      // "react": "React",
      // "react-dom": "ReactDOM"
    },

    performance: { hints: false },

    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
        filename: "index.html",
      }),
      new TSLintPlugin({
        files: ['./src/**/*.ts']
      }),
      new CopyWebpackPlugin([
        { from: './src/favicon.ico' },
        { from: './data/*.json', to: path.resolve(__dirname, 'dist/'), force: true  } ,
      ], {}),
      new Dotenv({
        path: finalPath
      })
    ]
  }
};

Answer 1

我明白了。默认情况下，Webpack 的生产模式将 optimization 下的属性 onEmitOnErrors 设置为 true。我正在使用 TypeScript，因为我有一个未解决的类型错误（它没有破坏应用程序所以它并不重要），构建不是由 Webpack 发出的。

希望对您有所帮助！

Webpack 4.0：生产配置不会创建 Bundle Chunk 文件

Webpack 4.0: Production Config Doesn't Create Bundle Chunk Files

bundle

build

webpack

webpack-4