升级你的webpack（上）-- webpack入门教程（二）

背景介绍：

我负责的一个前端项目之前用到的是webpack1，现需要升级到webpack4，特此记录下升级过程中有一些配置和需要注意的问题，具体会介绍：

(1) 需要的node环境的升级

(2) mode参数切换开发模式还是生产模式

(3) 移除了CommonsChunkPlugin，改用了optimization属性进行更加灵活的配置

(4) 用新的CSS文件提取插件mini-css-extract-plugin，替换extract-text-webpack-plugin

由于篇幅较长，分为上下两篇介绍，本文主要介绍前面两点，关于两个插件的使用介绍，请移步下一篇：升级你的webpack（下）-- webpack入门教程（三）。

1.依赖的node环境需要升级

这个在我之前的一篇文章webpack入门教程(一)中就提过，webpack4不再支持Nodejs4及以下版本，建议升级到8.9.4及以上版本。

2.mode模式优化配置文件

webpack4增加了mode属性，可以设置为development（开发环境）和production（生产环境）来快速切换默认配置，现在只需要在package.json中配置。

webpack4的基本配置：

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

如果项目编译需要的时间比较长，想要看到编译的进度等信息，则可以这样设置：

"scripts": {
    "dev": "webpack --mode development --progress --profile --colors -w",
},

相关参数：

colors：打包信息带彩色提示，比如：会用红色显示耗时较长的步骤

profile：输出性能数据，可以看到每一步的耗时

progress：输出当前编译的进度，以百分比的形式呈现

除了可以在package.json的启动命令后加入mode参数，另外一种配置方式，是在配置文件中加入mode属性：

module.exports = {
  mode: 'production' // development
};

development模式侧重于功能调试和优化开发体验（即为了更好的阅读、调试）：

· 浏览器调试工具

· 注释、开发阶段的详细错误日志和提示

· 快速和优化的增量构建机制

production模式下侧重于模块体积优化和线上部署（即能够更快地执行）：

· 开启所有的优化代码

· 更小的bundle大小

· 去除掉只在开发阶段运行的代码

· Scope hoisting和Tree-shaking

· 自动启用uglifyjs对代码进行压缩

下面一篇文章会对比webpack1，详细介绍如何使用webpack4的optimization属性、mini-css-extract-plugin，来替换webpack1中使用的CommonsChunkPlugin、extract-text-webpack-plugin插件。

以下是webpack系列的相关文章：

超详细！webpack入门教程(一)

升级你的webpack（下）-- webpack入门教程（三）