如何修改Laravel项目的Webpack配置生成独立CSS文件？

嘿，我来帮你搞定这个需求！要从指定的Sass文件生成独立的CSS打包文件，你需要做这几个关键修改：

1. 安装必要的插件 #

首先，你得安装mini-css-extract-plugin——这个插件能把CSS从JS打包文件里提取出来，生成独立的CSS文件（代替原来style-loader把CSS注入到JS中的行为）。在终端执行：

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

2. 修改Webpack配置文件 #

接下来调整你的webpack.config.js，具体修改点如下：

引入插件 #

在文件顶部新增插件引入代码：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 新增这行

新增入口点 #

在entry对象里添加print入口，指向你的目标Sass文件：

entry: { 
  app: ['./app/Http/app.js'],
  print: ['./app/assets/sass/print.sass'] // 新增这个独立入口
},

配置插件输出规则 #

在plugins数组里添加插件实例，指定CSS文件的输出路径和命名规则：

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css' // 对应entry里的print，最终生成public/css/print.css
  })
],

调整CSS/Sass加载规则 #

把原来的style-loader替换成MiniCssExtractPlugin.loader，这样Webpack就会把CSS提取成独立文件，而不是嵌入到JS中：

module: {
  rules: [
    { 
      test: /\.css$/, 
      use: [MiniCssExtractPlugin.loader, 'css-loader'] // 替换style-loader
    },
    { 
      test: /\.(sass|scss)$/, 
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] // 替换style-loader
    },
    ... // 保留你原来的其他规则
  ]
}

完整的修改后配置 #

最终的webpack.config.js会是这样：

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

module.exports = {
  entry: { 
    app: ['./app/Http/app.js'],
    print: ['./app/assets/sass/print.sass']
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'public/'),
    filename: 'assets/js/[name].js',
    publicPath: '/'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ],
  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
      { test: /\.(sass|scss)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']},
      ...
    ]
  }
}

验证效果 #

现在运行你的Webpack打包命令（比如npm run dev或者npx webpack），就能在public/css/目录下看到生成的print.css了，同时原来的app.js也会正常生成～

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