【笔记】Webpack打包CSS文件

前言

Webpack打包CSS文件

将CSS代码打包进HTML文件

• 将CSS代码打包进HTML文件，在HTML内通过<style></style>引入

下载依赖

npm install -D css-loader style-loader

修改配置文件

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  }
}

将CSS代码打包到单独的CSS文件

• 将CSS代码打包到单独的CSS文件，在HTML内通过<link>引入

下载依赖

npm install -D css-loader mini-css-extract-plugin

修改配置文件

webpack.config.js

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      chunkFilename: "[id].[contenthash].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

通过PostCSS将CSS代码转换后再打包

预设开发环境

下载依赖

npm install -D postcss-loader postcss-preset-env

修改配置文件

全部写在Webpack配置文件内

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                  ]
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

写在单独的PostCSS配置文件内

postcss.config.js

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

自动添加浏览器前缀

下载依赖

npm install -D postcss-loader autoprefixer

修改配置文件

全部写在Webpack配置文件内

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "autoprefixer"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

写在单独的PostCSS配置文件内

postcss.config.js

module.exports = {
  plugins: [
    "autoprefixer"
  ]
}

完成