如何让Webpack生成<link>引入样式而非内联样式以利用浏览器缓存？

你想要的效果是把CSS从打包后的JS文件中抽离成独立的.css文件，然后让Webpack自动在HTML中插入<link>标签引入它——这正是mini-css-extract-plugin的核心功能，它也是Webpack官方推荐用来替代旧版extract-text-webpack-plugin的工具。

具体实现步骤 #

1. 安装依赖 #

首先安装必要的包（如果已经有css-loader可以跳过它）：

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

2. 修改Webpack配置 #

在你的webpack.config.js中做以下调整：

• 先引入插件：

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

• 替换module.rules中原来的style-loader为插件提供的loader：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          // 把style-loader换成MiniCssExtractPlugin.loader
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
      ],
    },
    plugins: [
      // 实例化插件，默认会生成类似main.css的文件
      new MiniCssExtractPlugin(),
    ],
  };
  

3. 配合HTML自动注入（可选但推荐） #

如果你用了html-webpack-plugin，它会自动把生成的CSS文件通过<link>标签插入到输出的HTML中，完全不用手动写标签。

4. 优化缓存（进阶） #

为了更好地利用浏览器缓存，可以给输出的CSS文件名加上内容哈希——只有当CSS内容变化时，文件名才会改变：

new MiniCssExtractPlugin({
  filename: '[name].[contenthash].css',
})

开发环境vs生产环境的小技巧 #

开发环境中，style-loader的热更新速度更快，所以可以根据环境变量切换loader：

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    ...(isProduction ? [new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })] : []),
  ],
};

要不要放弃这种做法？ #

其实大部分生产环境场景都推荐这么做，理由包括：

• 充分利用浏览器缓存，独立的CSS文件可以被长期缓存
• 减少JS文件体积，加快JS的解析和执行
• 可以配合PostCSS、CSS Modules等工具在Webpack流程中处理CSS

唯一需要权衡的场景是：如果你的CSS代码极少（比如几KB），内联到<style>标签里反而能减少一次HTTP请求，这时候可以考虑继续用style-loader。但对于绝大多数项目来说，抽离成独立文件是更优的选择。

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