详解webpack4升级指南以及从webpack3.x迁移

　　

几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移。

　　

题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式。毕竟之前包裹的0配置确实抢了很多webpack的风头,然后也去弄了一下包裹使用包裹+ vue的简单模版工程,有兴趣可以看一下。

　　

<强>
　　

　　

<强> 0。安装
　　

　　

不在只安装<代码> webpack> webpack-cli :

　　

全局安装

　　 　　 　　sudo npm安装- g webpack webpack-cli 　　 　　

局部安装(当前文件夹)

　　 　　 　　npm安装——save-dev webpack webpack-cli 　　 　　

<强> 1。0配置
　　

　　

默认的入口为<代码>”。/src/"> ”。/dist”,
　　

　　

对压缩(optimization.minimize)的设置,默认在生产时开启,在开发时关闭。

　　

默认配置不仅限于上述两项。

　　

<强> 2。模式/模式参数
　　

　　

新增了模式/Ｊ讲问幢硎臼强⒒故巧?模式有两个可选值:开发和生产、生产不支持监听,生产侧重于打包后的文件大小,开发侧重于构建的速度。

　　 　　 　　以前webpack——模式发展 　　 　　

也可以在配置文件中配置:

　　 　　//webpack.config.js 　　模块。出口={ 　　模式:“生产”,//? 　　} 　　 　　之前 　　 　　

<强> 3。对uglifyjs升级
　　

　　

在之前的vue脚手架创建的基于webpack的工程,在<代码> webpack.prod.conf.js> 　　

　　

//UglifyJs不支持ES6 +,您还可以使用更好的treeshaking babel-minify: https://github.com/babel/minify
　　

　　 　　

在webpack4.0中已经可以压缩es6代码,如:

　　 　　 　　类用户{ 　　getUsername () {//要做的 　　} 　　} 　　 　　

压缩之后为:

　　

详解webpack4升级指南以及从webpack3.x迁移

　　

<强> 4。移除装载机、必须使用规则
　　

　　

在webpack3.x中还保留之前版本的装入器,与规则并存都可以使用,在新版中完全移除了装载机、必须使用规则。

　　

<强> 5。调查
　　

　　

在模块的package.js中添加调查:假的,当使用出口单独导出的时候,不会打包出口之外的其他文件,使打包的文件更小。

　　

相关链接:https://github.com/webpack/webpack/tree/master/examples/side-effects

　　

<强> 6。webpack4支持多种形式的模块类型,但是有时候可能需要加上类型进行配合
　　

　　

如果是CommonJS、AMD、ESM三种类型的模块,使用javascript/汽车;
　　

　　

如果是EcmaScript模块(.mjs),使用javascript/esm,其他的模块类型将不生效;
　　

　　

如果只有CommonJS和EcmaScript模块不可用,使用javascript/动态;
　　

　　

如果是json类型的文件,允许使用要求和进口来导入json,使用json;
　　

　　

如果是Webassembly,使用Webassembly/实验——官方说是一个实验性的功能。

　　

举个栗子:

　　 　　 　　规则:[ 　　{ 　　测试:/\ . json/美元, 　　类型:“javascript/汽车” 　　} 　　) 　　 　　

<强> 7。支持ES6的方式导入JSON文件,并且可以过滤无用的代码
　　

　　

下面是三种导入json文件的方法:

　　 　　 　　让jsonData=https://www.yisu.com/zixun/require ('/data.json。'); 　　 　　从“进口jsonData。/data.json ' 　　 　　从“进口{一}。/data.json ' 　　之前 　　 　　

其中使用进口{一}”。/data.json引入的json文件会忽略没导入的代码,打包时只会将第一次的打进去。

　　

<强> 8。移除CommonsChunkPlugin,用optimization.splitChunks和optimization.runtimeChunk来代替
　　

　　

这里内容有点多,不做具体介绍,后续可能会出一篇有关optimization.splitChunks的文章,在下面从3. x迁移的时候会有简单介绍,出了上面的新版relesase链接外,下面还推荐几个不错的链接:

详解webpack4升级指南以及从webpack3.x迁移