基本配置

入口(entry)

entry: {
    app: './src/main.js'
}

输出(output)

output: {
  path: path.resolve(__dirname, "dist"), // string  vue.config->outputDir
  // 所有输出文件的目标路径
  // 必须是绝对路径（使用 Node.js 的 path 模块）
  filename: "js/[name].js", // string
  // 「入口分块(entry chunk)」的文件名模板
  publicPath: "/static/", // string  根目录为 /

  // 输出解析文件的目录，url 相对于 HTML 页面
  library: "MyLibrary", // string,
  // 导出库(exported library)的名称
  libraryTarget: "umd", // 通用模块定义
},

解析(resolve)

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
  descriptionFiles: ['package.json'], // 用于描述的 JSON 文件。默认：
  enforceExtension: false, // 强制添加扩展后缀
  extensions: ['.wasm', '.mjs', '.js', '.json'],  // 能自动解析确定的扩展，默认
  modules: ['node_modules'], // 告诉 webpack 解析模块时应该搜索的目录
}

优化(optimization)

optimization: {
  splitChunks: { // vue-cli默认配置
    cacheGroups: {
      defaultVendors: {
        name: 'chunk-vendors',
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: 'initial'
      },
      common: {
        name: 'chunk-common',
        minChunks: 2,
        priority: -20,
        chunks: 'initial',
        reuseExistingChunk: true
      }
    }
  },
  minimize: false,// 告知 webpack 使用 TerserPlugin 压缩 bundle。production 模式下，这里默认是 true。
  minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        extractComments: false
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
          compress: { // vue-cli默认配置
            arrows: false,
            collapse_vars: false,
            comparisons: false,
            computed_props: false,
            hoist_funs: false,
            hoist_props: false,
            hoist_vars: false,
            inline: false,
            loops: false,
            negate_iife: false,
            properties: false,
            reduce_funcs: false,
            reduce_vars: false,
            switches: false,
            toplevel: false,
            typeofs: false,
            booleans: true,
            if_return: true,
            sequences: true,
            unused: true,
            conditionals: true,
            dead_code: true,
            evaluate: true
          },
          mangle: {
            safari10: true
          }
        }
      }),
  ],
}

loader

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
                { loader: 'less-loader' },
            ],
        },
    ]
}

插件(plugins)

plugins: [
    new ExtractTextPlugin({
        filename: 'build.min.css',
        allChunks: true,
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // 编译时(compile time)插件
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"',
    }),
    // webpack-dev-server 强化插件
    new DashboardPlugin(),
    new webpack.HotModuleReplacementPlugin(),
]

开发中(devServer)

devServer: {
  color: true, //控制台的彩色输出。
  compress: true, //一切服务都启用 gzip 压缩：
  headers: { //在所有响应中添加首部内容：
    'X-Custom-Foo': 'bar'
  },
  host: '0.0.0.0', // 服务器外部可访问
  port: 8080,
  hort: true, //启用 webpack 的 模块热替换 功能
  https: true, // 选择带有 HTTPS 的 HTTP/2 提供服务
  overlay: true, // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用 {warnings:true,errors: true}
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {
        '^/api' : ''
      },
      secure: false, //接受运行在 HTTPS 上
      bypass: function(req, res, proxyOptions) { // 浏览器请求和API请求区分
        if (req.headers.accept.indexOf('html') !== -1) {
          console.log('Skipping proxy for browser request.');
          return '/index.html';
        }
      },
      setup: function(app, server) { // 添加自定义中间件
        app.get('/some/path', function(req, res) {
          res.json({ custom: 'response' });
        });
      }
    }
  }
}