webpack中的开发模式和生产模式
详细解读webpack配置之mode众所周知,webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包,所以需要很多的依赖和处理方法,那么它的配置也将会有很多很多的东西....下面,我就将一些比较常用的列举出来,它们的用法以及配置...module.exports = {mode: '',en...
详细解读webpack配置之mode
众所周知,webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包,所以需要很多的依赖和处理方法,那么它的配置也将会有很多很多的东西....下面,我就将一些比较常用的列举出来,它们的用法以及配置...
module.exports = { mode: '', entry: '', output: '', plugins: [], module: [], resolve: '', devServer: {} }
1.mode (模式)
mode值分为三种:none / development / production
1.1none模式下的模块打包
在没有任何优化处理的情况下,按照webpack默认的情况下打包出模块,它会将模块打包至数组之中,调用模块的时候,就是直接调用模块在此数组中的一个序号,然后没有进行压缩、混淆之类的优化。
但是无论是在开发环境development下,还是在正式环境production下,这个代码都是不过关的,对于开发环境,此代码可读性太差,对于正式环境,此代码不够简洁,因此,为了减少一次重复操作,webpack4提供的development/production可以很大程度上帮我们做一大部分的事情,我们要做的,就是在这些事的基础上增加功能。
1.2development模式下,webpack做了哪些打包工作
development是告诉程序,我现在是开发状态,也就是打包出来的内容要对开发友好。在此mode下,就做了以下插件的事情,其他什么都没有做,所以这些插件可以省略。
//webpack.config.js module.exports = { mode:'development', devtool:'eval', plugins: [ new webpack.NamedModulesPlugin(), new webpack.NamedChunksPlugin(), new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }) ] }
我们看看NamedModulesPlugin和NamedChunksPlugin这两个插件都做了啥,原本我们的webpack并不会给打包的模块加上名字,一般都是按照序号来,从0开始,然后加载第几个模块,这个对机器来说无所谓,查找载入很快,但是对于人脑来说就是灾难了,所以这个时候给各个模块加上姓名,便于开发的时候查找。
没有NamedModulesPlugin,模块就是一个数组,引用也是按照在数组中的顺序引用,新增模块都会导致序号的变化。
有了NamedModulesPlugin,模块都拥有了姓名,而且都是独一无二的key,不管新增减少多少模块,模块的key都是固定的
除了NamedmodulesPlugin,还有一个NamedChunksPlugin,这个是给配置的每个chunks命名,原本的chunks也是数组,没有名字。
NamedChunksPlugin其实就是提供了一个功能,你可以自定义chunks的名字,加入我在不同的包中有相同的chunk名,怎么办?这个时候就要在进行进一步的区分了,我们可以用所有的依赖模块名加上本模块名,因为Chunk.modules已经废弃了,现在用其他的方法来代替chunk.mapModules,然后重命名chunk的名字
new webpack.NameChunksPlugin( (chunk) => { return chunk.mapMudoles( m => { return path.relative(m.context,m.request); }).join('_') })
总结:development也就给我们省略了命名的过程,但是其他还是要我们自己加的。
1.3production
在正式版本中,所省略的插件们,如下所示,我们会一个个分析
//webpack.config.js module.exports = { mode:'production', plugins: [ new UglifyJsPlugin(/*...*/), new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), new webpack.optimize.ModuleConcatenationPlugin(), new webpack.NoEmitOnErrorsPlugin() ] }
UglifyJsPlugin
我们第一个需要处理的就是混淆&压缩js了吧,这个时候就要请出UglifyJs了,他在webpack中的名字是
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
这样,就可以使用他了
不过 new UglifyJsPlugin(),这个插件我们可以在optimize中配置,效果是一样的,那么我们是不是不用在导入一个新的插件了,这样反而会拖慢webpack的打包速度
optimization: { minimize: true }
将插件去除,混淆压缩放入optimization,这样webpack速度快的起飞了,只有第一次打包会慢,之后在打包就快了
ModuleConcatenationPlugin
webpack.optimize.ModuleConcatenationPlugin()这个插件的作用是什么呢?官网文档上是这么描述的
记住,此插件仅适用于由webpack直接处理的ES6模块,在使用转译器(transpiler)时,你需要禁用对模块的处理(例如Babel中的modules选项)。
NoEmitOnErrorsPlugin
最后一个插件就是webpack.NoEmitOnErrorsPlugin(),这个就是用于防止程序报错,就算有错误也给我继续编译,很暴力的做法...
others
还有一些默认的插件配置,也就是可以不在plugin中引用的配置
OccurrenceOrderPlugin
webpack.optimize.OccurrenceOrderPlugin这个插件的作用是按照chunk引用次数来安排出现顺序,因为这让经常引用的模块和chunk拥有更小的id。
SideEffectsFlagPlugin
webpack.optimize.SideEffectsFlagPlugin()这个插件如果需要生效的话,需要两个条件,一个是导入的模块已经标记了sideEffect,即package.json中的sideEffects这个属性为false,第二个就是当前模块引用了次无副作用的模块,而且没有使用。那么在打包的时候,就不会将这个模块打包到文件中。
更多推荐
所有评论(0)