1 webpack的基本配置

⚡ 30 秒速记

• 五个核心概念：entry（入口）、output（出口）、loader（单文件内容转换）、plugin（生命周期介入）、mode
• ⚠️ loader 从右往左（从下往上）执行：['style-loader','css-loader','sass-loader'] 实际是 sass → css → style
• ⚠️ babel-loader 必须配 exclude: /node_modules/——不排除要转译几万个已是 ES5 的文件，是构建慢的头号原因
• filename 用 contenthash 不用 hash：后者是整次构建的哈希，改一个文件全部缓存失效
• mode: production 会自动开压缩、Tree Shaking、作用域提升、注入 NODE_ENV——很多"本地没问题线上有"的差异源于此
• devServer.proxy 只在开发环境生效，打包产物里没有这段逻辑

webpack 基础配置围绕 entry、output、loader、plugin 和 mode，分别负责入口、产物、文件转换、构建扩展与环境默认项。 loader 从右往左执行，例如样式链是 sass → css → style；babel-loader 一般排除 node_modules，避免无效转译。产物名用 contenthash 更利于长效缓存，而 devServer.proxy 只在开发环境有效，线上仍要由服务端处理跨域。

webpack 配置的五个核心概念，理解它们就理解了整个构建流程：

概念	作用	一句话
entry	入口	从哪个文件开始构建依赖图
output	出口	产物放哪、叫什么名字
loader	文件转换	单个文件的内容转换（.vue→js、.scss→css）
plugin	生命周期介入	跨文件、跨阶段的能力（生成 HTML、抽 CSS、压缩）
mode	模式	development/production，决定一批默认优化开关

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',   // contenthash 是缓存策略的基础
    clean: true,
  },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' },
      // loader 从右往左（从下往上）执行
      { test: /\.s?css$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|jpe?g|svg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 8 * 1024 } } },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  devServer: { port: 3000, hot: true, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } },
}