Webpack 构建 css 和 js 文件

Question

我的问题是 webpack 在输入是 sass 文件时同时构建 js 和 CSS 文件。这是什么webpack 输出。我只希望为 scss 输出 css 文件，而不是两者兼而有之。我不知道该怎么做。我希望有人能帮忙。这是我的代码。

let path = require("path");
let webpack = require("webpack");
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let SRC = path.join(__dirname, "client", "src");
let DIST = path.join(__dirname, "client", "dist", "bundles");
module.exports = [{
    entry: {
        admin: SRC + "/js/admin/index.js",
        main: SRC + "/js/main/index.js",
        adminstyles: SRC + "/scss/admin/index.scss",
        mainstyles: SRC + "/scss/main/index.scss"
    },
    output: {
        path: DIST,
        filename: "[name]-bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
                name: 'commons',
                filename: 'common.js',
                chunks: ['admin', 'main']
            }
        ),
        new ExtractTextPlugin("[name]-bundle.css")
    ],
    module: {
        loaders: [
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract("css!sass")
            },
            {test: /.jsx?$/, loader: "babel-loader"}
        ]
    },
    resolve: {
        extensions: ["", ".js", ".jsx"],
        root: [path.join(__dirname, "client", "src", "js", "main")],
        modulesDirectories: ["node_modules"]
    }
}];

Answer 1

每个入口点都会获得一个包含 webpack 引导代码的 JavaScript 包，即使内容是用 extract-text-webpack-plugin 提取的。与其为 CSS 使用单独的入口点，不如将它们包含在相应的入口点中，这在概念上也是有意义的，因为样式将在其中使用。每个entry也接受一个数组。

您的参赛作品应为：

entry: {
    admin: [SRC + "/js/admin/index.js", SRC + "/scss/admin/index.scss"],
    main: [SRC + "/js/main/index.js",  SRC + "/scss/main/index.scss"]
},

如果要保持名称mainstyles和adminstyles，还可以将extract-text-webpack-plugin更改为：

new ExtractTextPlugin("[name]styles-bundle.css")