Webpack 4 Vue项目：如何将第三方依赖CSS与自定义CSS分块打包？

嘿，这个场景我之前做Vue项目的时候刚好碰到过，其实通过Webpack的入口配置+mini-css-extract-plugin的合理设置就能轻松搞定，一步步来：

1. 拆分第三方样式与自定义样式的引入结构 #

首先，我们要把Bootstrap的样式从组件里抽出来，单独做一个入口文件：

• 在src/styles目录下新建vendor.bootstrap.scss，里面只放Bootstrap的引入：

// src/styles/vendor.bootstrap.scss
// 注意~符号让sass-loader自动去node_modules找Bootstrap
@import '~bootstrap/scss/bootstrap';

• 然后修改你的App.vue和其他组件的<style>块，删掉所有引入Bootstrap的代码，只保留自定义的CSS样式。

2. 修改Webpack入口配置 #

在webpack.config.js里，把第三方样式作为一个独立的入口项，和你的主入口分开：

module.exports = {
  entry: {
    main: './src/main.js', // 主入口：包含Vue组件、自定义逻辑及组件内的自定义CSS
    vendor: './src/styles/vendor.bootstrap.scss' // 第三方样式入口：仅Bootstrap相关
  },
  // ...其他基础配置
}

3. 配置MiniCssExtractPlugin实现分块哈希打包 #

接下来要让插件根据不同的entry输出带哈希的独立CSS文件，配置如下：

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

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({
      // [name]对应entry里的main和vendor，[contenthash]是基于文件内容生成的哈希，利于缓存
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css'
    })
  ],
  module: {
    rules: [
      // 处理scss文件
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // 用插件loader替换style-loader，提取CSS到文件
          'css-loader',
          'sass-loader'
        ]
      },
      // 处理Vue组件内的样式
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true, // 开启组件内CSS提取，配合MiniCssExtractPlugin
          // ...其他vue-loader配置
        }
      },
      // ...其他loader配置（比如处理图片、字体等）
    ]
  }
}

4. 额外注意事项 #

• 如果你之前在main.js里直接引入过Bootstrap的CSS/Scss，记得删掉这行代码，避免重复打包；
• 如果Bootstrap用到了字体、图标等静态资源，要确保你配置了file-loader或url-loader来处理这些文件；
• contenthash会在文件内容变化时更新，能帮你实现浏览器缓存优化，不用手动改文件名。

这样配置完之后，执行打包命令，你就能得到两个独立的带哈希的CSS文件：

• main.xxxxxx.css：包含所有Vue组件里的自定义CSS；
• vendor.xxxxxx.css：仅包含Bootstrap的第三方样式。

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