新版 Webpack 4.0：十行配置，把打包变成约定

Webpack 4.0 当年被称为“新版”，最大的变化不是功能变多，而是约定变多、配置变少。零配置、mode、splitChunks、Tree Shaking，这些今天看来习以为常的东西，都是从 4.0 开始成为默认。虽然现在已有 Webpack 5.x，但很多老项目的构建基线，仍然停在 4.0。

一、零配置：没有配置文件也能跑

Webpack 4.0 最大的善意，是默认入口和出口。你什么都不写，它也会找 src/index.js，打包到 dist/main.js。

安装只要两个包：

npm i webpack webpack-cli -D

然后运行：

npx webpack --mode production

零配置适合小项目，但真实项目仍然需要 webpack.config.js。只是现在，配置可以很短。

二、mode：开发和生产，两条路

Webpack 4.0 引入 mode，一行决定构建行为：

• development：不压缩，保留调试信息，构建快；
• production：自动压缩、Tree Shaking、作用域提升。

以前要装一堆插件才能做的事，现在只写一个单词。

三、少量代码：最小可用配置

下面这份配置只有十行左右，却覆盖了入口、出口、生产模式和代码分割：

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js'
  },
  optimization: {
    splitChunks: { chunks: 'all' }
  }
};

配合 package.json：

"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
}

十行配置，跑通现代前端构建的主干。

四、Tree Shaking：删掉没用的代码

Webpack 4.0 的 Tree Shaking 依赖 ES module。只要模块是 import/export，未使用的导出就可能被删除。

再补一刀：在 package.json 里加：

"sideEffects": false

告诉 Webpack：这个包没有副作用，放心摇。体积往往能再降一截。

五、代码分割：splitChunks 取代 CommonsChunkPlugin

Webpack 4.0 移除了 CommonsChunkPlugin，改用 optimization.splitChunks。公共依赖、第三方库、重复模块，自动提取成独立 chunk。

上面配置里的 chunks: 'all'，就是让同步和异步模块都参与分割。缓存命中率更高，首屏加载更轻。

六、动态 import：按需加载

代码分割的另一半，是动态导入：

button.onclick = () => import('./chart').then(m => m.render());

Webpack 会把 chart 单独打包，点击时才加载。路由懒加载、大组件按需加载，都是这个套路。

七、常见坑

第一，不写 mode，构建会警告，产物也没优化。 第二，生产环境忘了压缩，体积白白翻倍。 第三，CSS 提取不用 mini-css-extract-plugin，样式全打进 JS。 第四，缓存不用 contenthash，改一行代码，用户全量重新下载。 第五，混用 CommonJS 和 ES module，Tree Shaking 容易失效。 第六，sideEffects 乱设 false，有副作用的模块被误删。

八、结语

新版 Webpack 4.0 的意义，不是让你写更复杂的配置，而是让你少写配置、多写约定。零配置起步，mode 分环境，splitChunks 做分割，Tree Shaking 删冗余，动态 import 按需加载。

记住：十行配置，撑起一套现代前端构建。 Webpack 4.0 把复杂留给自己，把约定留给开发者。