记录：webpack打包css,less,sass

1. 打包css

安装打包css依赖包 cnpm install css-loader style-loader -D

index文件

在js文件内require css文件

style.css 文件

webpack.config.js 配置

在webpack.config.js中的module写入

const { resolve } = require("path");
// 应用打包html插件
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        //从右到左，从上到下
        use: ["style-loader", "css-loader"], //参数1打包到html文件，参数2打包到js文件
      },
    ],
  },
 
  mode: "development", //生产模式 production，开发模式development
};

打包后的main.js 文件

打包后的 index.html 文件

2. 打包less

安装依赖cnpm i less less-loader -D

在webpack.config.js 中的module写入

module: {
    rules: [
      //                use 打包从末尾开始打包
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 从右到左 参数1打包到html文件，参数2打包到js文件
      // 先打包 less-loader 打包成css，然后再通过css-loader 打包到js文件中，再通过style-loader 以头标签的形式 插入到html中
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
    ],
  },

3. 打包sass

安装依赖 cnpm i node-sass sass-loader -D

在webpack.config.js中的module写入

  module: {
    rules: [
      //                use 打包从末尾开始打包
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 从右到左 参数1打包到html文件，参数2打包到js文件
      // 先打包 less-loader 打包成css，然后再通过css-loader 打包到js文件中，再通过style-loader 以头标签的形式 插入到html中
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
    ],
  },

如果需要打包单独的css文件则需要安装mini-css-extract-plugin

• cnpm install mini-css-extract-plugin -D 安装打包单独的css文件

1. 修改webpack.config.js 中的module

• 把{ test: /.css$/, use: ["style-loader", “css-loader”] }
• 修改成{ test: /.css$/, use: [miniCssExtractPlugin.loader, “css-loader”] },

less csss的css文件也是同理，把style-loader修改成miniCssExtractPlugin.loader

打包后的目录

  module: {
    rules: [
      //                use 打包从末尾开始打包
      // { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 从右到左 参数1打包到html文件，参数2打包到js文件
      { test: /\.css$/, use: [miniCssExtractPlugin.loader, "css-loader"] }, // 从右到左 参数1打包到html文件，参数2打包到js文件
      // 先打包 less-loader 打包成css，然后再通过css-loader 打包到js文件中，再通过style-loader 以头标签的形式 插入到html中
      { test: /\.less$/, use: [miniCssExtractPlugin.loader, "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
    ],
  },
  plugins: [
    new miniCssExtractPlugin({
      filename: "index.css",//打包后的css名字 打包成一个css文件
    })
  ]

CSS打包后兼容性问题

像display：flex或者backface-visibility：hidden这些属性，一些版本低的浏览器就不支持，所以需要引入postcss-loader 和postcsss-preset-env 包

安装 npm install postcss-loader postcss-preset-env -D
在use后面加上"postcss-loader"，兼容less，csss同理
这里的postcss-loader会自动找更目录下的postcss.config.js文件

 rules: [
      //                use 打包从末尾开始打包
      // { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 从右到左 参数1打包到html文件，参数2打包到js文件
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      }, // 从右到左 参数1打包到html文件，参数2打包到js文件
      // 先打包 less-loader 打包成css，然后再通过css-loader 打包到js文件中，再通过style-loader 以头标签的形式 插入到html中
      {
        test: /\.less$/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
          "postcss-loader",
        ],
      },
      {
        test: /\.scss$/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
          "postcss-loader",
        ],
      },
    ],

接着在更目录 创建postcss.config.js文件

而postcss.config.js 会自动去找pageage.json下的browserslist内容

内容很简单，如下

module.exports = {
	plugins:[
		require("postcss-preset-env")() 
	]
}

pageage.json 文件内容需要写

 "browserslist": [
    ">0.2%",
    "last 20 versions", //向下支持的版本，数字越大兼容版本越大
    "not dead"
  ]

打包后的文件会自动加上兼容
像display:-webkit-box,display:-webkit-flex，就是插件处理兼容问题的

压缩CSS

cnpm i optimize-css-assets-webpack-plugin -D

• webpack-config.js

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

//在 plugins 中new OptimizeCssAssetsWebpackPlugin()
plugins: [
		new OptimizeCssAssetsWebpackPlugin(),
]

• 打包后的css就去除了空格 、注释
  

打包图片

导入包cnpm install url-loader file-loader -D

module: {
		    rules: [
		    
      {
        // 打包css里面的图片
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: "url-loader",
        options: {
          publicPath: "./images/",//到处是加上这个路径
          outputPath: "/images/",//到处的目录
          limit: 1024 * 8, //小于8kb才给转base64
          //   name: "[name].[ext]",//用这个就还是原来的名字，打包之前什么名字，打包后就是什么名字
          name: "[hash:3].[ext]",//默认是name："[hash].[ext]"
        },
      },
			]
	}