Webpack 构建 css 和 js 文件

Question

我的问题是，当输入是 sass 文件时，webpack 会构建 js 和 css 文件。这是什么 webpack outputs。我只想为 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 bootstrap 代码的 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")

Webpack 构建 css 和 js 文件

Webpack building both css and js files

javascript

webpack

webpack-style-loader

webpack-2

extract-text-plugin