如何让Webpack 4仅在对应文件变更时编译Sass或JS？

嘿，这个问题我之前帮不少开发者踩过坑——在webpack-dev-server下修改Sass触发全量JS编译，项目大了之后确实挺耽误时间的。咱们分两种场景来解决你的问题：

一、能不能让Webpack仅编译CSS而不编译JS？ #

webpack本质是模块依赖驱动的打包工具，默认会从入口文件出发遍历所有依赖，所以很难直接让它只处理CSS完全跳过JS。但有几个折中的方案能达到类似效果：

1. 开启热模块替换（HMR），实现CSS局部更新 #

这是最推荐的方案，配置完之后修改Sass只会更新对应的CSS模块，完全不会触发JS的重编译。具体配置步骤：

• 在webpack.config.js中开启HMR：

  const webpack = require('webpack');
  
  module.exports = {
    // ...其他基础配置
    devServer: {
      hot: true, // 开启热更新
      open: true
    },
    plugins: [
      // ...其他插件（比如HtmlWebpackPlugin）
      new webpack.HotModuleReplacementPlugin() // 热更新核心插件
    ],
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // 开发环境用style-loader，支持热更新；生产环境换成MiniCssExtractPlugin.loader
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    }
  };
  

• 在你的主JS文件（比如index.js）末尾添加热更新接受代码：

  if (module.hot) {
    module.hot.accept();
  }
  

这样修改Sass文件时，webpack只会重新编译CSS相关模块，通过HMR实时注入到页面，JS完全不会被重新打包。

2. 拆分独立的CSS编译配置 #

如果你的项目允许，可以把CSS和JS拆成两个独立的webpack配置文件，分别启动编译：

• 新建webpack.css.config.js，只处理CSS入口：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    entry: './src/styles/main.scss', // 直接以CSS文件作为入口
    output: {
      filename: '[name].js', // 这里会生成一个空的JS文件，可忽略
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ],
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    }
  };
  

• 用concurrently同时启动两个编译进程（先安装：npm i concurrently -D），修改package.json的scripts：

  "scripts": {
    "dev:js": "webpack-dev-server --config webpack.config.js",
    "dev:css": "webpack --watch --config webpack.css.config.js",
    "dev": "concurrently \"npm run dev:js\" \"npm run dev:css\""
  }
  

这样修改Sass时，只有dev:css进程会编译，JS进程完全不受影响。

二、如果必须同时编译，如何让CSS优先输出？ #

如果你的项目结构不允许拆分配置，必须让webpack同时处理JS和CSS，那可以通过调整入口优先级来让CSS先输出：

1. 使用webpack-priority-plugin指定入口顺序 #

这个插件可以让你给不同的入口设置优先级，数值越大优先级越高，会被先编译：

• 先安装插件：npm i webpack-priority-plugin -D
• 修改webpack.config.js：

  const PriorityPlugin = require('webpack-priority-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    entry: {
      styles: './src/styles/main.scss', // CSS入口
      app: './src/js/index.js' // JS入口
    },
    plugins: [
      new PriorityPlugin({
        styles: 10, // 给CSS入口设置更高优先级
        app: 1
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ],
    // ...其他模块规则和配置
  };
  

这样webpack会优先编译styles入口对应的CSS，输出CSS文件后再处理JS入口，能让你更快看到CSS的更新效果。

2. 利用compiler.hooks手动调整编译顺序 #

如果你不想额外安装插件，可以通过webpack的编译钩子来干预流程，比如在JS编译前等待CSS编译完成：

module.exports = {
  // ...其他配置
  plugins: [
    {
      apply: (compiler) => {
        // 监听编译开始钩子，先触发CSS相关模块的编译
        compiler.hooks.compile.tap('PrioritizeCSS', (compilationParams) => {
          const cssEntry = compiler.options.entry.styles;
          if (cssEntry) {
            // 手动添加CSS模块到编译队列
            compilationParams.normalModuleFactory.create({
              context: compiler.context,
              request: cssEntry
            });
          }
        });
      }
    }
  ]
};

这个方法需要对webpack的编译流程有一定了解，适合有自定义需求的场景。

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