webpack4的迁移的使用方法


Posted in Javascript onMay 25, 2018

感觉是突然之间,webpack4的消息就满天飞了,听说打包速度提高了很多,还有最大的噱头是实现了零配置,leader有一天就吩咐我说,有时间把我们的项目也升个级呗。好嘞。

1.x到2.x

这次升级跨度比较大,我们是从webpack1.x升级到4.x,因为1.x与2.x相差挺大,所以第一件事,就是先升到2.x,比较大的改动就是loader的配置方式

// 1.x
preLoaders: [
 {
  test: /\.vue$/,
  loader: 'eslint',
  exclude: /node_modules/
  }, {
  test: /\.js$/,
  loader: 'eslint',
  exclude: /node_modules/
  }
],
loaders: [
 { test: /\.vue$/, loader: 'vue' },
 { test: /\.json$/, loader: 'json' },
 { test: /\.html$/, loader: 'html' },
...
]
//2.x
module: {
  rules: [
  {
   test: /.vue$/,
   use: 'eslint-loader',
   enforce: 'pre', // 对应1.x的preLoaders
   exclude: /node_modules/
   }, {
   test: /.js$/,
   use: 'eslint-loader',
   enforce: 'pre',
   exclude: /node_modules/
   },
   { test: /\.vue$/, use: 'vue-loader' },
   { test: /\.json$/, use: 'json-loader' },
   { test: /\.html$/, use: 'html-loader' },
  ...
  ]
},

而且loader一定要写完整,vue-loader如果只写vue会报错。loader还可以通过options进行配置。

{
 loader: 'css-loader',
 options: {
  autoprefixer: false
 }
}

旧版的链式调用也用数组替代。

1.x

style!postcss!less

2.x

use: [
  "style-loader",
  "css-loader",
  "less-loader"
 ]

webpack2.x默认支持es6的模块,所以在编译时候没有必要将它们先转换CommonJS模块再处理,babel-preset-es2015-webpack已经支持不转换模块中的importexport,只需要设置.babelrc

"presets": [
 ["es2015", { "modules": false }]
]

另外就是插件的升级,运行时哪个插件报错就升级哪个插件,屡试不爽。

2.x到4.x

第一步:版本升级

  1. 不再支持node 4,可以直接升级到8.x版本
  2. webpack升级
npm install webpack@4 --save

npm install webpack-cli --save // 不要忘记这一点,用来启动webpack的

插件升级,同理,哪个报错就升级哪个,除了html-webpack-plugin用下面的方法升级,原因是作者还未来得及升级

npm i webpack-contrib/html-webpack-plugin --save-dev

extract-text-webpack-plugin只有最新的beta版本才支持,所以npm install extract-text-webpack-plugin@next --save-dev

第二步 运行命令中添加 --mode development--mode production

PS:虽然说webpack 4是零配置,入口默认是src/index.js,出口是dist/,但由于项目是多页面的,所以这一步并没有省略,根据实际情况来。

第三步 移除CommonsChunkPlugin

//替代方案
module: {
 rules: [
 ...
 ]
},
optimization: {
 splitChunks: {
 chunks: "all",   // 必须三选一:'initial' | 'all' | 'async'
 minSize: 0,    
 minChunks: 1,
 maxAsyncRequests: 1,
 maxInitialRequests: 1,
 name: () => {},
 cacheGroups: {
  vendor: {
   chunks: 'all',
   test: /node_modules/,  // 正则规则验证,如果符合就提取chunks
   name: "vendor"   // 要缓存的分割出来的chunk名称
  },
  default: {
   chunks: 'all',
   name: 'commons',
   reuseExistingChunks: true
  }
 }
 }
}

因为多个页面,所以结合了html-webpack-plugin

new HtmlWebpackPlugin({
 template: 'index.html',
 chunks: ['vendor', 'commons', 'index']
 })

刚开始一直出错,是因为我没有复写default,也没有default:false,所以其实默认配置有将所有的模块的公共部分分离到某个文件中,但我在HtmlWebpackPlugin中的chunks中又没有添加,所以要么覆写原来的默认配置,要么就关闭默认配置。

第四步:配置postcss autoprefixer

在根目录下创建一个文件`postcss.config.js`

module.exports = {
 plugins: [
  require('postcss-inline-svg')({
   removeFill: false
  }),
  require('postcss-pxtorem')({
   replace: process.env.NODE_ENV === 'production',
   rootValue: 750 / 16,
   minPixelValue: 1.1,
   propWhiteList: [],
   unitPrecision: 5
  }),
  require('autoprefixer')({browsers: ['iOS>7', 'Android>4']})
 ]
};

...
 {
  test: /\.(css|less)$/,
  use: ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use:[{
   loader: 'css-loader',
   options: {
    autoprefixer: false
   }
   },
   {
   loader: 'postcss-loader',
   options: {
    sourceMap: true
   }
   },
   {
   loader: 'less-loader',
   options: {
    relativeUrls: true
   }
   }]
  })
 },
...

第五步:不需要UglifyJsPlugin插件

只需要设置optimization.minimize: true就行,production mode下面自动为true

以上只是在原有项目的基础上对webpack 4的升级,还有一些特性并没有用到,所以没有提及,比如sideEffectsjavascript/auto javascript/esm javascript/dynamicwebassembly/experimental等等,有机会再去探索。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
js实现上传图片并显示图片名称
Dec 18 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 #Javascript
详解webpack4多入口、多页面项目构建案例
May 25 #Javascript
js中的 || 与 && 运算符详解
May 24 #Javascript
vue axios整合使用全攻略
May 24 #Javascript
vue路由拦截及页面跳转的设置方法
May 24 #Javascript
使用Vue自定义指令实现Select组件
May 24 #Javascript
详解Vue单元测试case写法
May 24 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
DISCUZ 分页代码
2007/01/02 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
武汉某公司的C#笔试题面试题
2015/12/25 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
岗位职责定义及内容
2013/11/08 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
平安建设工作方案
2014/06/02 职场文书
领导班子整改措施
2014/10/24 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书