1

我的问题是当输入是 sass 文件时，webpack 会同时构建 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"]
    }
}];
4

1 回答 1

2

每个入口点都会获得一个带有 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")
于 2017-03-23T16:31:05.233 回答