webpack-css文件合并和压缩和css兼容处理

(1): css文件合并(mini-css-extract-plugin)

 yarn add -D mini-css-extract-plugin
 
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
  // 装载器配置
  module:{
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,'css-loader'] // css顺序是从右到左，从下到上
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] // less顺序是从右到左，从下到上
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'] // sass顺序是从右到左，从下到上
      },
    ]
  },
  
    // mini-css-extract-plugin
	plugins: [
          new MiniCssExtractPlugin({ // 抽取css放在公共文件夹
		      filename: 'index.css' // 合并css的公共文件
		    })
   ]

npx webpack打包,可以看到我们所有的css文件都被统一到index.css文件夹下了

(2): css文件压缩

1： (optimize-css-assets-webpack-plugin)

 yarn add -D  optimize-css-assets-webpack-plugin
 const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
   // 压缩css
  optimization: {
    minimizer: [new OptimizeCssAssetsWebpackPlugin]
  },

npx webpack打包,可以看到index.css文件都被压缩为一行

2： (css-minimizer-webpack-plugin)推荐使用

 yarn add -D css-minimizer-webpack-plugin
 const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin") // 最新压缩css
 plugins: [
      // css-minimizer-webpack-plugin
    new CssMinimizerWebpackPlugin() // 压缩css
 ]

npx webpack打包,可以看到index.css文件都被压缩为一行

(3): css添加前缀,兼容浏览器

 yarn add postcss postcss-loader postcss-preset-env
 yarn add autoprefixer
 

• webpack.config.js配置如下

 const commonCssConfig = [ // 公共的css配置
  MiniCssExtractPlugin.loader,
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      //css兼容性配置
      postcssOptions: {
        plugins: [[require("postcss-preset-env")()]],
      },
    },
  },
];
  // 装载器配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssConfig], // css顺序是从右到左，从下到上
      },
      {
        test: /\.less$/,
        use: [...commonCssConfig,'less-loader'], // less顺序是从右到左，从下到上
      },
      {
        test: /\.scss$/,
        use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上
      },
    ],
  },

• 新建postcss.config.js

 module.exports={
	plugins:[require('autoprefixer')]
}

• package.json里边的配置如下

   "browserslist": [
    "Firefox > 20",
    "iOS >= 7",
    "ie >= 8",
    "last 5 versions",
    "> 5%"
  ]

npx webpack 打包，可以看到css添加上了前缀了,是不是so easy

完整的代码如下

 // webpack是基于node,所以使用module.exports
const path = require("path");

let HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html模板

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前,清除dist

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css

// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩css

const TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-plugin

const commonCssConfig = [ // 公共的css配置
  MiniCssExtractPlugin.loader,
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      //css兼容性配置
      postcssOptions: {
        plugins: [[require("postcss-preset-env")()]],
      },
    },
  },
];

module.exports = {
  // 老版压缩css
  // optimization: {
  //   minimizer: [new OptimizeCssAssetsWebpackPlugin]
  // },
  // 入口配置
  entry: "./src/index.js",
  // 模式配置
  mode: "production", // 指定模式，默认是生产模式，开发模式便于查看代码
  // 出口配置
  output: {
    path: path.resolve(__dirname, "dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\dist
    filename: "index.js", // 指定输出的文件名
  },
  // webpack-dev-server配置
  devServer: {
    host: "localhost", // 主机
    port: "9527", // 端口
    open: true, // 自动打开
    historyApiFallback: true, //找不到页面默认跳index.html
    compress: true, //一切服务都启用gzip 压缩
    hot: true, //启动热更新
    proxy: {
      // 代理配置
      "/api": {
        target: "http:localhost:5000",
        changeOrigin: true,
      },
    },
  },
  // 装载器配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssConfig], // css顺序是从右到左，从下到上
      },
      {
        test: /\.less$/,
        use: [...commonCssConfig,'less-loader'], // less顺序是从右到左，从下到上
      },
      {
        test: /\.scss$/,
        use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上
      },
    ],
  },
  // 插件配置
  plugins: [
    // html-webpack-plugin
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 指定模板
      filename: "index.html", // 指定输出的文件名
    }),
    // new HtmlWebpackPlugin({ // 多模板
    //   template: './src/index.html', // 指定模板
    //   filename: 'main.html', // 指定输出的文件名
    // }),
    // clean-webpack-plugin
    new CleanWebpackPlugin(), // 使用这个插件在每次生成dist目录前，先删除dist目录

    // mini-css-extract-plugin
    new MiniCssExtractPlugin({
      // 抽取css放在公共文件夹
      filename: "index.css", // 合并css的公共文件
    }),
    // css-minimizer-webpack-plugin
    new CssMinimizerWebpackPlugin(), // 新版压缩css

    // terser-webpack-plugin
    new TerserWebpackPlugin({
      // 压缩js
      test: /\.js(\?.*)?$/i, //匹配参与压缩的文件
      parallel: true, //使用多进程并发运行
      terserOptions: {
        //Terser 压缩配置
        output: { comments: false },
        compress: {
          pure_funcs: ["console.log"], // 去除console.log
        },
      },
      extractComments: true, //将注释剥离到单独的文件中
    }),
  ],
};