一、前言
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
功能。
- 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
- 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。