Webpack 4：如何将SCSS编译为独立CSS文件

嘿，这问题我熟！你现在CSS被打包进JS里，是因为用了style-loader——它的作用是把编译后的CSS通过JavaScript动态注入到页面的<style>标签中，自然就跟着JS一起进bundle了。要把CSS分离成独立文件，咱们可以用mini-css-extract-plugin（这是Webpack官方推荐的提取CSS的插件，比旧的extract-text-webpack-plugin更适配现代Webpack版本）。

步骤1：安装插件 #

先在项目里安装这个依赖：

npm install --save-dev mini-css-extract-plugin

步骤2：修改Webpack配置 #

接下来调整你的webpack.config.js，主要做三处修改：

• 顶部引入mini-css-extract-plugin
• 把style-loader替换成MiniCssExtractPlugin.loader
• 在配置的plugins数组里添加插件实例，指定输出的CSS文件名

修改后的完整配置代码如下：

var path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入插件

module.exports = {
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
  },
  watch:true,
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css' // 指定输出的独立CSS文件名
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["es2015"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // 替换原来的style-loader
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  }
};

最后一步：在HTML中引入独立CSS文件 #

重新运行Webpack打包后，你的dist目录里会生成bundle.js和styles.css两个文件，记得在页面的<head>里手动引入styles.css：

<link rel="stylesheet" href="/dist/styles.css">

这样就能完美实现CSS和JS的分离啦！

内容的提问来源于stack exchange，提问作者fortyfiveknots