高清的网站制作,网站建设比较好,我想学制作网站,内容展示类网站接上一篇webpack4.0配置记录(1),继续记录学习webpack配置。 定义环境变量 new Webpack.DefinePlugin({//用来定义全局环境变量DEV:JSON.stringify(dev),FLAG:true
}), webpack简单优化 noParsemodule:{noParse:/jquery/,//不去解析设置的包所依赖的关系,如jquery
} ignorePlugi… 接上一篇webpack4.0配置记录(1),继续记录学习webpack配置。 定义环境变量 new Webpack.DefinePlugin({//用来定义全局环境变量DEV:JSON.stringify(dev),FLAG:true
}), webpack简单优化 noParsemodule:{noParse:/jquery/,//不去解析设置的包所依赖的关系,如jquery
} ignorePluginmodule:{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 Happypackrequire(happypack)
...
module.exports{module:{noParse:/jquery/,//不去解析设置的包所依赖的关系rules:[{test:/\.js$/,exclude:/node_modules/,include:path.resolve(src),use:Happypack/loader?idjs// 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,//抽离模块最小粒度是0minChunks:2//表示代码块用过2次以上就要抽离},vendor:{priority:1,//相当于权重先抽离第三方模块如果不设置该属性分割代码块将从上到下无法抽离第三方模块。test:/node_modules/,chunks:initial,minSize:0,//抽离模块最小是0minChunks:2//表示用过2次以上就要抽离}}}},
} 文件热更新devServer:{hot:true
},
plugins:[new webpack.NamedModulesPlugin(),//打印更新的模块路径new webpack.HotModuleReplacementPlugin()//热更新
] 7.可以使用dllPlugin动态链接库优化 DllPlugin 和 DllReferencePlugin提供了以大幅度提高构建时间性能的方式拆分软件包的方法。原理是将特定的第三方NPM包模块提前构建然后通过页面引入。这不仅能够使得vendor文件可以大幅度减小同时也极大的提高了构件速度。网上别的大神有一篇文章写的很详细可以参考传送门。 以上就是一些自己在学习webpack4.0配置过程中的一些学习记录写出来和大家分享如果有错误还望告知。个人博客同步更新欢迎关注交流不要忘了点个赞谢谢
