webpack 4 新特性

一、新增 webpack-cli

webpack 4 中把 webpack 和 webpack-cli 分开了。所以在使用了时候需要使用 npm install webpack webpack-cli 命令同时安装这两个模块。并且需要安装在同一目录下，否则会一直提示需要安装 webpack-cli。

二、零配置

webpack 4 不再需要使用 webpack.config.js 做入口配置文件。
默认的打包入口是根目录/src/index.js 。
默认的打包出口是根目录/dist/main.js。
在打包的时候需要选择 mode 模式，可选的模式一种有三种，即 development （开发模式）、 production （生产模式）、none（不开启任何优化项。如果不想额外创建 webpack.config.js 文件，可以在 package.json 中通过如下命令做打包模式配置：

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}

development 开发模式：

• 提供浏览器调试工具
• 注释、开发阶段的详细错误日志和提示
• 快速和优化的增量构建机制

production 生产模式：

• 开启所有的优化配置项
• 更小的 bundle 体积
• 去除掉只在开发阶段运行的代码
• Scope hoisting（作用域提升,有依赖关系的模块合并到一个函数中） 和 Tree-shaking（消除模块之间无用代码）

webpack4.x 的默认配置路径：node_modules/webpack/lib/WebpackOptionsDefaulter.js

三、插件系统

1. webpack v4.26.0 将默认的压缩插件从 uglifyjs-webpack-plugin 改成 teaser-webpack-plugin 。uglifyjs-webpack-plugin 使用的 uglify-es 已经不再被维护，取而代之的是一个名为 terser 的分支。所以 webpack 官方放弃了使用 uglifyjs-webpack-plugin，建议使用 terser-webpack-plugin。

2. webpack4 删除了 CommonsChunkPlugin 插件，使用内置API optimization.splitChunks （代码分割）和optimization.runtimeChunk（提取公共代码）。

3. 其它插件变化如下（以下插件均会在生产环境模式开启）:
   使用 optimization.noEmitOnErrors 替代 NoEmitOnErrorsPlugin（编译出错时，跳过输出阶段） ；
   使用 optimization.concatenateModules 替代 ModuleConcatenationPlugin （作用域提升，使代码文件更小、运行更快）；
   使用 optimization.namedModules 替代 NamedModulesPlugin （热加载时直接返回更新文件名，而不是文件的id）。

4. webpack 4 与 extract-text-webpack-plugin （从 JS 中提取 单独的 CSS）不兼容。
   兼容方案：
   使用 npm install extract-text-webpack-plugin@next 下载最新版本的插件（最新版是测试版，还未正式发布）；
   使用 npm install mini-css-extract-plugin 代替。