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基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
javascript二维数组转置实例
Jan 22 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
最后说说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
Zend的AutoLoad机制介绍
2012/09/27 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
javascript实用小函数使用介绍
2013/11/11 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python计算字符宽度的方法
2016/06/14 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
实习单位接收函模板
2014/01/10 职场文书
2014年清明节寄语
2014/04/03 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
婚宴新郎致辞
2015/07/28 职场文书
python如何做代码性能分析
2021/04/26 Python
Python基础之操作MySQL数据库
2021/05/06 Python