1 webpack的基本配置

⚡ 30 秒速记

• 五个核心概念：entry（从哪开始）、output（产物放哪）、loader（单个文件内容转换）、plugin（介入构建生命周期）、mode
• loader 从右往左（从下往上）执行：['style-loader','css-loader','sass-loader'] 实际顺序是 sass → css → style
• babel-loader 要配 exclude: /node_modules/，不排除就会去转译几万个依赖文件
• 文件名用 [contenthash]：只有内容变了文件名才变，没改的文件继续命中浏览器缓存
• mode: 'production' 自动开压缩、Tree Shaking、作用域提升，并把打包代码里的 process.env.NODE_ENV 替换成 'production'
• devServer.proxy 只在本地开发生效，线上跨域要靠 Nginx 或后端 CORS

webpack 的基础配置就是五样东西：entry 告诉它从哪开始找依赖，output 决定产物放哪、叫什么，loader 负责把非 JS 文件转成模块，plugin 在构建流程里做额外的事，mode 决定一整套默认优化。 面试里最常被追问的是 loader 的执行顺序，它是从右往左，所以样式规则要写成 style、css、sass。实际项目里我会盯两件事：babel-loader 一定排除 node_modules，产物文件名用 contenthash 做长期缓存。另外 Webpack 5 已经内置资源模块 type: 'asset'，不用再装 url-loader 和 file-loader。

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 } } },
}