Webpack 配置生成器

默认输出

使用默认设置（production 模式、TypeScript、Babel、CSS 加载器和 HtmlWebpackPlugin）时，生成器会输出：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
    clean: true,
  },
  resolve: { extensions: ['.ts','.tsx','.js'] },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

每个选项写入的内容

输出中固定的选择

为保持初始配置简洁，有些值是替你设定好的，而不是作为字段暴露出来：

• 带哈希的文件名。 output.filename 始终是 bundle.[contenthash].js，每当 bundle 变化时都会使浏览器缓存失效。
• 干净的输出。 output.clean: true 会在每次构建时清空输出文件夹，这是 webpack 5 中 clean-webpack-plugin 的替代方案。
• CSS 打包进 bundle，而非抽取出来。 style-loader 通过 JavaScript 注入样式。若要在生产环境中输出单独的 .css 文件，请自行添加 MiniCssExtractPlugin。
• 开发服务器基础项。 开启后，devServer 会设置 static、port: 3000 和 hot: true。如果应用需要，请手动添加 historyApiFallback 或 proxy 等选项。

如何进一步扩展

生成的文件是一个起点，而非完整的生产配置。你通常会自行添加的后续步骤有：用于抽取 CSS 的 MiniCssExtractPlugin、用于 .scss 的 sass-loader、用于图片和字体的 webpack 5 asset 模块、用于 source map 的 devtool 值，以及用于代码分割的 splitChunks 区块。