挣脱藩篱，遇见更广阔的自己

介绍关于webpack提取css为单独文件的相关问题包括了css兼容性处理以及压缩css等内容下面一起来看一下希望对大家有帮助。

安装插件并引入npm install mini-css-extract-plugin -DconstMiniCssExtractPluginrequire(mini-css-extract-plugin)配置插件pluginsplugins:[newHtmlWebpackPlugin({template:./src/index.html}),newMiniCssExtractPlugin({filename:css/built.css//对输出的文件进行重命名,默认为main.css})],修改loader文件{test:/.css$/,use:[//取代css-loader,提取js中css成单独文件注意MiniCssExtractPlugin.loader,//将css文件整合到JS文件中css-loader,]},css兼容性处理

安装插件npm install postcss-loader postcss-preset-env-D

在module中配置postcss-loader并配置postcss-preset-env插件{test:/.css$/,use:[//取代css-loader,提取js中css成单独文件MiniCssExtractPlugin.loader,//将css文件整合到JS文件中css-loader,//css兼容性处理postcss -- postcss-loader postcss-preset-env//帮postcss找到package.json中browserslist里面的配置通过配置加载指定的css兼容性样式{loader:postcss-loader,options:{ident:postcss,//默认配置plugins:()[require(postcss-preset-env)()]}}]},

配置package.json中的browserslistbrowserslist:{development:[last 1 chrome version,last 1 firefox version,last 1 safari version],production:[

1%,not dead,not op_mini all]}

为了使package.json中browserslist中的development环境生效需要在webpack.config.js中配置环境因为默认是生产环境我们开发需要开发环境const{resolve}require(path)constHtmlWebpackPluginrequire(html-webpack-plugin)constMiniCssExtractPluginrequire(mini-css-extract-plugin)//设置node.js环境变量,默认是生产环境配置后为开发环境process.env.NODE_ENVdevelopment;压缩css

安装插件并引用npm install optimize-css-assets-webpack-plugin -DconstOptimizeCssAssetsWebpackPluginrequire(optimize-css-assets-webpack-plugin)

在plugins中配置插件plugins:[newHtmlWebpackPlugin({template:./src/index.html}),newMiniCssExtractPlugin({filename:css/built.css//对输出的文件进行重命名}),//压缩css文件newOptimizeCssAssetsWebpackPlugin()],

今夜无人入睡免费完整版官方版-今夜无人入睡免费完整版官方版应用