网站开发工程师好吗,淘宝网站建设教程视频教程,潍坊高密网站建设,it培训班出来工作有人要么之前学习过webpack3的知识#xff0c;但是webpack4升级后还是有很多变动的#xff0c;所以这次重新整理一下webpack4的知识点#xff0c;方便以后复习。这次学习webpack4不仅仅要会配置#xff0c;记住核心API#xff0c;最好还要理解一下webpack更深层次的知识#xff0…之前学习过webpack3的知识但是webpack4升级后还是有很多变动的所以这次重新整理一下webpack4的知识点方便以后复习。这次学习webpack4不仅仅要会配置记住核心API最好还要理解一下webpack更深层次的知识比如打包原理等等所以可能会省略一些比较基础的内容但是希望我可以通过此次学习掌握webpack更好地应对以后的工作。1. MiniCssExtractPlugin可以利用这个插件对css进行代码分割。注补充一个知识点在output中可以配置chunkFilename这个是对间接引用的js文件进行命名稍后会用到。首先安装插件cnpm install --save-dev mini-css-extract-plugin。安装完成后在webpack.config.js中引入插件并在plugins中初始化。然后配置module把所有的style-loader替换为MiniCssExtractPlugin.loader其他配置项不变。进行打包dist目录中就有了CSS文件。如果此时打包的文件没有css有可能是因为tree Shaking中package.json没有设置sideEffects。2. MiniCssExtractPlugin参数与js相同页面直接引用的css命名规则是filename而间接引用的css命名规则是chunkFilename。3.MiniCssExtractPlugin其他用法如果我们引入两个css文件MiniCssExtractPlugin会把他们打包到一个文件中。如果想压缩css代码需要安装一个插件 optimize-css-assets-webpack-plugin。首先安装cnpm install --save-dev optimize-css-assets-webpack-plugin然后引入插件。然后在optimization.minimizer初始化插件。运行打包命令发现css代码已经被压缩合并了。插件底层也借助了splitChunksPlugin如果css有多个入口也可以通过cacheGroups来分割合并css代码。optimization: {splitChunks: {cacheGroups: {styles: {name: styles,test: /\.css$/,chunks: all,enforce: true // 强制忽略minChunks等设置}}}}复制代码多入口js中如果想让各个js中引入的css打包到对应的css文件中需要这样配置。optimization: {splitChunks: {cacheGroups: {fooStyles: {name: foo,test: (m, c, entry foo) // foo入口下的css打包到foo.css中m.constructor.name CssModule recursiveIssuer(m) entry,chunks: all,enforce: true},barStyles: {name: bar,test: (m, c, entry bar) // bar入口下的css打包到bar.css中m.constructor.name CssModule recursiveIssuer(m) entry,chunks: all,enforce: true}}}}复制代码
