Webpack

webpack.config.js

const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 提取js代码里的css到单独文件中

module.exports = {
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist")
  },
  module: {
    rules: [
      // {
      //   // 遇到以.css结尾的文件，先用css-loader读取，再用style-loader将其注入到js
      //   test: /\.css$/,
      //   use: [ // loader名称组成的数组，由后到前执行
      //     "style-loader",
      //     {
      //       loader: "css-loader",
      //     }
      //   ]
      // },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader" }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `[name]_[contenthash:8].css` // [name] 文件名称，[contenthash:8] 根据文件内容算出的8位Hash值
    })
  ]
}