webpack 自学笔记 ---4 提取css文件&css兼容&压缩css

乾坤符箓：

　　提取css文件为单独文件（mini-css-extract-plugin）

　　css兼容（postcss）

　　压缩css(optimize-css-assets-webpack-plugin)

1、提取css文件为单独文件

　　

const { resolve } = require("path");
 
 　　const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 　　const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 　　module.exports = {
 
 　　　　entry:"./src/index.js",
 
 　　　　output:{
 
 　　　　　　filename:"build.js",
 
 　　　　　　path:resolve(__dirname,"build")
 
 　　　　},
 
 　　　　//loader
 
 　　　　module:{
 
 　　　　　　rules:[
 
 　　　　　　　　　　{
 
 　　　　　　　　　　　test:/\.css$/,
 
 　　　　　　　　　　　use:[
 
 　　　　　　　　　　　　{
　　　　　　　　　　　　　　loader:MiniCssExtractPlugin.loader,　　// 原先是"style-loader"(作用：创建style标签，将样式注入)；现在是mini-css-extract-plugin(作用：提取js中的css成单独文件！)
　　　　　　　　　　　　　　options:{
　　　　　　　　　　　　　　　　publicPath:"../"
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　},
 
 　　　　　　　　　　　　"css-loader"
 
 　　　　　　　　　　},
 　　　　　　　　　　{
 
 　　　　　　　　　　　　test:/\.less$/,
 
 　　　　　　　　　　　　use:[
 
 　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　loader:MiniCssExtarct.loader,
　　　　　　　　　　　　　　　　options:{
　　　　　　　　　　　　　　　　　　public:"../"
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
 
 　　　　　　　　　　　　　"css-loader","less-loader"
 
 　　　　　　　　　　　　]
 
 　　　　　　　　　　}
 
 　　　　　　　　]
 
 　　　　　　]
 
 　　　　},
 
 　　　　plugins:[
 
 　　　　　　new HtmlWebpackPlugin({
 
 　　　　　　　　template:"./src/index.html"
 　　　　　　}),
　　　　　　new MiniCssExtractPlugin({
　　　　　　
　　　　　　　   filename:"css/build.css",//对输出的css文件进行重命名
          })
　　　　],
　　　　mode:"development"
 　　} 

　　

　　附魔：当使用'mini-css-extract-plugin'进行css文件独立打包，使用'url-loader'对css中引用的图片文件等进行打包时，发现:在html中的<img>标签内的图片可以正常显示，但在css中写在background-image中的图片无法正常显示，这也就是我为什么在使用"mini-css-extract-plugin"时增加配置的原因

　　原先：

　　　　MiniCssExtractPlugin.loader　　　　　　　　=>　　　　　　　　{

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　loader:MiniCssExtarctPlugin.loader,

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:{

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　publicPath:"../"

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

理由：找不到路径，我们就给它个公共的路径

css兼容处理

　　依赖：postcss-loader、postcss-preset-env;

　　postcss-preset-env作用：帮助postcss找到package.json中browerlist里配置，通过配置加载指定的css兼容样式（package.json里面配置需要兼容浏览器的版本）

　　

　　设置node环境变量：

　　process.env.NODE_ENV = "development"　　//（设置即生效）

　　不设置默认为生产环境

开打开打：

　　module.exprots = {

　　　　...

　　　　module:{

　　　　　　rules:[

　　　　　　　　{

　　　　　　　　　　test:/\.css$/,

　　　　　　　　　　use:[

　　　　　　　　　　　　{

　　　　　　　　　　　　　　loader:MiniCssExtract.loader,

　　　　　　　　　　　　　　options:{

　　　　　　　　　　　　　　　　publicPath:"../"

　　　　　　　　　　　　　　}

　　　　　　　　　　　　},

　　　　　　　　　　　　"css-loader",

　　　　　　　　　　　　{

　　　　　　　　　　　　　　loader:"postcss-loader",

　　　　　　　　　　　　　　options:{

　　　　　　　　　　　　　　　　postcssOptions:{

　　　　　　　　　　　　　　　　　　ident:"postcss",　　

　　　　　　　　　　　　　　　　　　plugins:["postcss-preset-env"]

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　　　]

　　　　　　　　}

　　　　　　]

　　　　}

　　}

同时需要配置package.json里面兼容浏览器的版本配置

　　broswerslist:{

　　　　development:[

　　　　　　"last 1 chrome version",

　　　　　　"last 1 firefox version",

　　　　　　"last 1 safari version",

　　　　],

　　　　production:[

　　　　　　">0.2%",

　　　　　　"not dead",

　　　　　　"not op_mini_all"

　　　　]

　　}

　打包前：

　　

 

打包后：

　　

 

 

压缩CSS

　　依赖：optimize-css-assets-webpack-plugin

开打开打：

　　const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

 

　　module.exports = {

　　　　...

　　　　plugins:{

　　　　　　...

　　　　　　new OptimizeCssAssetsWebpackPlugin()

 

　　　　}

　　}