webpack4的迁移的使用方法

 更新时间:2018年05月25日 10:06:35   作者:__橘生淮南  
本篇文章主要介绍了webpack4的迁移的使用方法,主要介绍了如何从webpack1.x升级到4.x,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

感觉是突然之间,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学习之闭包分析

    闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。
    2010-12-12
  • js模拟淘宝网的多级选择菜单实现方法

    js模拟淘宝网的多级选择菜单实现方法

    这篇文章主要介绍了js模拟淘宝网的多级选择菜单实现方法,涉及javascript针对页面元素结点的遍历与设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js实现移动端轮播图滑动切换

    js实现移动端轮播图滑动切换

    这篇文章主要为大家详细介绍了js实现移动端轮播图滑动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JavaScript实现动态加载删除表格

    JavaScript实现动态加载删除表格

    这篇文章主要为大家详细介绍了JavaScript实现动态加载删除表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JS匀速运动演示示例代码

    JS匀速运动演示示例代码

    匀速运动的效果想必大家都有见到过吧,在本文为大家介绍下使用JS是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • js toFixed()方法的重写实现精度的统一

    js toFixed()方法的重写实现精度的统一

    凡用过js 中的toFix() 方法的, 应该都知道这个方法存在一个小小的BUG,在IE 下和FF 下对于小数的进位有点不同
    2014-03-03
  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    js+html5获取用户地理位置信息并在Google地图上显示的方法

    这篇文章主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下
    2015-06-06
  • js实现年月日表单三级联动

    js实现年月日表单三级联动

    这篇文章主要为大家详细介绍了js实现年月日表单三级联动,生日栏表单三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • js时钟翻牌效果实现代码分享

    js时钟翻牌效果实现代码分享

    这篇文章主要介绍了javascript时钟翻牌效果的实现,效果非常酷炫,实现步骤也很简单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • js绘制一条直线并旋转45度

    js绘制一条直线并旋转45度

    这篇文章主要为大家详细介绍了js绘制一条直线并旋转45度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论