webpack4.0配置记录(2)
栏目: JavaScript · 发布时间: 5年前
内容简介:通过exclude排除和include包含某些模块另外也可以使用webpack自带的ignorePlugin插件排除某些包,减少体积。以上配置忽略了时间格式化moment.js中的语言包
new Webpack.DefinePlugin({//用来定义全局环境变量 DEV:JSON.stringify('dev'), FLAG:'true' }),
webpack简单优化
-
noParse
module:{ noParse:'/jquery/',//不去解析设置的包所依赖的关系,如jquery }
-
ignorePlugin
module:{ noParse:'/jquery/',//不去解析设置的包所依赖的关系 rules:[ { test:/\.js$/, exclude:/node_modules/, include:path.resolve('src'), use:{ loader:'babel-loader', options:{ presets:[ '@babel/preset-env', '@babel/preset-react' ] } } } ] }
通过exclude排除和include包含某些模块
另外也可以使用webpack自带的ignorePlugin插件排除某些包,减少体积。
new webpack.IgnorePlugin(/\.\/locale/,/moment/),
以上配置忽略了时间格式化moment.js中的语言包
-
happypack多线程打包
let Happypack=require('happypack') ... module.exports={ module:{ noParse:'/jquery/',//不去解析设置的包所依赖的关系 rules:[ { test:/\.js$/, exclude:/node_modules/, include:path.resolve('src'), use:'Happypack/loader?id=js' // use:{ // loader:'babel-loader', // options:{ // presets:[ // '@babel/preset-env', // '@babel/preset-react' // ] // } // } } ] }, plugins:[ new Happypack({ id:'js', use:[ { loader:'babel-loader', options:{ presets:[ '@babel/preset-env', '@babel/preset-react' ] } } ] }) ] }
-
webpack内置功能
(1)tree-shaking
(2)scope-hosting
这两项优化只在生产环境下有效
- 抽离公共代码
module.exports={ optimization:{ splitChunks:{//分割代码块 cacheGroups:{//缓冲组 common:{ chunks:'initial', minSize:0,//抽离模块最小粒度是0 minChunks:2//表示代码块用过2次以上就要抽离 }, vendor:{ priority:1,//相当于权重,先抽离第三方模块,如果不设置该属性,分割代码块将从上到下,无法抽离第三方模块。 test:/node_modules/, chunks:'initial', minSize:0,//抽离模块最小是0 minChunks:2//表示用过2次以上就要抽离 } } } }, }
- 文件热更新
devServer:{ hot:true }, plugins:[ new webpack.NamedModulesPlugin(),//打印更新的模块路径 new webpack.HotModuleReplacementPlugin()//热更新 ]
7.可以使用dllPlugin动态链接库优化
DllPlugin 和 DllReferencePlugin提供了以大幅度提高构建时间性能的方式拆分软件包的方法。原理是将特定的第三方NPM包模块提前构建,然后通过页面引入。这不仅能够使得vendor文件可以大幅度减小,同时,也极大的提高了构件速度。网上别的大神有一篇文章写的很详细,可以参考, 传送门 。
以上就是一些自己在学习webpack4.0配置过程中的一些学习记录,写出来和大家分享,如果有错误,还望告知。欢迎关注交流!不要忘了点个赞,谢谢!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。