Webpack 3配置中ExtractTextPlugin无法输出CSS文件问题

我帮你排查了下给出的Webpack配置和package.json，发现了几个关键问题，咱们一步步来解决：

问题1：ExtractTextPlugin的路径和格式写错了 #

你在创建ExtractTextPlugin实例时，把filename写成了数组，而且路径设置得不对。Webpack的文件输出路径是基于output.path（这里是public/js）来解析的，你原来写的./public/css/app.css会让Webpack尝试在public/js/public/css/下面生成文件，这显然不是你想要的。另外，filename参数应该是字符串，不是数组哦。

问题2：少了css-loader处理CSS #

你的scss loader规则里只加了sass-loader，它只能把SCSS编译成CSS，但还需要css-loader来处理CSS的导入、解析这些工作，不然ExtractTextPlugin没法正确提取出CSS内容。

问题3：没在入口文件里引入SCSS文件 #

Webpack是靠依赖树来打包的，如果你不在app.js里引入你的app.scss，Webpack根本不知道要处理这个文件，自然不会输出CSS啦。

修正后的完整Webpack配置 #

import path from 'path';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

// 把filename改成字符串，路径相对于output.path往上一级到public，再到css目录
const ep = new ExtractTextPlugin({filename: "../css/app.css"});

export default {
    context: path.resolve(__dirname, 'resources', 'assets', 'js'),
    entry: './app.js',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'public', 'js')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: /resources\/assets\/js/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /app.scss$/,
                include: [path.resolve(__dirname, 'resources', 'assets', 'sass')],
                exclude: [path.resolve(__dirname, "node_modules")],
                use: ep.extract({
                    use: [
                        // 补上css-loader，先处理CSS再交给sass-loader编译
                        { loader: 'css-loader' },
                        {
                            loader: 'sass-loader',
                            options: {
                                includePaths: [
                                    path.resolve(__dirname, 'node_modules', 'foundation-sites', 'scss')
                                ],
                                sourceMap: false
                            }
                        }
                    ],
                    fallback: "style-loader"
                })
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin([
            path.resolve(__dirname, 'public', 'js'),
            path.resolve(__dirname, 'public', 'css')
        ]),
        ep
    ]
};

别忘了在入口文件里引入SCSS #

打开resources/assets/js/app.js，加上这行代码（路径根据你的实际文件位置调整）：

// 引入SCSS文件，让Webpack把它加入依赖树
import '../sass/app.scss';

可选：调整输出根目录更直观 #

如果你觉得当前output.path设为public/js有点绕，也可以把输出根目录改成public，这样文件路径更清晰：

// 修改output配置
output: {
    filename: 'js/app.js',
    path: path.resolve(__dirname, 'public')
},
// 同时修改ExtractTextPlugin的filename
const ep = new ExtractTextPlugin({filename: "css/app.css"});

这样调整后，JS会输出到public/js/app.js，CSS到public/css/app.css，结构更一目了然。

最后运行npm run build试试，应该就能在public/css目录下看到生成的CSS文件啦！

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