初探webpack4

一、前言

2018/2/25，webpack4正式发布，距离现在已经过去三个多月了，也逐渐趋于稳定，而且现在的最新版本都到了4.12.0（版本迭代快得真是让人害怕）。

很多人都说webpack复杂，难以理解，很大一部分原因是webpack是基于配置的，可配置项很多，并且每个参数传入的形式多种多样（可以是字符串、数组、对象、函数。。。），文档介绍也比较模糊，这么多的配置项各种排列组合，想想都复杂。而gulp基于流的方式来处理文件，无论从理解上，还是功能上都很容易上手。

//gulp
gulp.src('./src/js/**/*.js')
.pipe('babel')
.pipe('uglifyjs')
.dest('./dist/js')

//webpack
module.exports = {
  entry: './src/main.js',
  output: __dirname + '/dist/app.js',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader'
    }]
  },
  plugins: [
    new require('uglifyjs-webpack-plugin')()
  ]
}

上面简单对比了webpack与gulp配置的区别，当然这样比较是有问题的，gulp并不能进行模块化的处理。这里主要是想告诉大家使用gulp的时候，我们能明确的知道js文件是先进行babel转译，然后进行压缩混淆，最后输出文件。而webpack对我们来说完全是个黑盒，完全不知道plugins的执行顺序。正是因为这些原因，我们常常在使用webpack时有一些不安，不知道这个配置到底有没有生效，我要按某种方式打包到底该如何配置？

为了解决上面的问题，webpack4引入了零配置的概念（Parcel ？？？），实际体验下来还是要写不少配置。
但是这不是重点，重点是官方宣传webpack4能够提升构建速度60%-98%，真的让人心动。

二、到底怎么升级

0、初始化配置

首先安装最新版的webpack和webpack-dev-server，然后再安装webpack-cli。webpack4将命令行相关的操作抽离到了webpack-cli中，所以，要使用webpack4，必须安装webpack-cli。当然，如果你不想使用webpack-cli，社区也有替代方案webpack-command，虽然它与webpack-cli区别不大，但是还是建议使用官方推荐的webpack-cli。

npm i webpack@4 webpack-dev-server@3 --save-dev
npm i webpack-cli --save-dev

webpack-cli除了能在命令行接受参数运行webpack外，还具备migrate和init功能。

1. migrate用来升级webpack配置，能将webpack1的api升级到webpack2，现在用处不大。

$ webpack-cli migrate ./webpack.config.js
 ✔ Reading webpack config
 ✔ Migrating config from v1 to v2
-    loaders: [
+      rules: [
-        loader: 'babel',
-          query: {
   
+            use: [{
   
+              loader: 'babel-loader'
+            }],
+            options: {
   
-              loader: ExtractTextPlugin.extract('style', 'css!sass')
+              use: ExtractTextPlugin.extract({
   
+                fallback: 'style',
+                use: 'css!sass'
+              })
? Are you sure these changes are fine? Yes

 ✔︎ New webpack v2 config file is at /home/webpack-cli/build/webpack.config.js

1. init可以快速生成一个webpack配置文件的模版，不过用处也不大，毕竟现在的脚手架都集成了webpack的配置。

webpack-cli init

1. Will your application have multiple bundles? No // 如果是多入口应用，可以传入一个object
2. Which module will be the first to enter the application? [example: './src/index'] ./src/index // 程序入口
3. What is the location of "app"? [example: "./src/app"] './src/app'
4. Which folder will your generated bundles be in? [default: dist]
5. Are you going to use this in production? No
6. Will you be using ES2015? Yes //是否使用ES6语法，自动添加babel-loader
7. Will you use one of the below CSS solutions? SASS // 根据选择的样式类型，自动生成 loader 配置
8. If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)
9. Name your 'webpack.[name].js?' [default: 'config']: // webpack.config.js

Congratulations! Your new webpack configuration file has been created!

更详细介绍请查看webpack-cli的文档

1、零配置

零配置就意味着webpack4具有默认配置，webpack运行时，会根据mode的值采取不同的默认配置。如果你没有给webpack传入mode，会抛出错误，并提示我们如果要使用webpack就需要设置一个mode。