Webpack 构建 css 和 js 文件 [英] Webpack building both css and js files

问题描述

我的问题是，当输入是 sass 文件时，webpack 会同时构建 js 和 css 文件.这是什么webpack 输出.我只想为 scss 输出 css 文件，而不是两者都输出.我不知道如何去做.我希望有人能帮帮忙.这是我的代码.

my problem is that webpack builds both js and css files when the input is sass file. Here is what webpack outputs. I just want css files to be outputed for scss, not both. I do not know how to do that. I hope someone can help. Here is my code.

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"]
    }
}];

推荐答案

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

Every entry point gets a JavaScript bundle with the webpack bootstrap code, even if the content is extracted with the extract-text-webpack-plugin. Instead of using a separate entry point for the CSS you should include them in the corresponding entry point, which also makes sense conceptually as the styles are going to be used in them. Each entry also accepts an array.

您的条目应该是:

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 更改为:

If you want to keep the names mainstyles and adminstyles you can also change the extract-text-webpack-plugin to:

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

这篇关于Webpack 构建 css 和 js 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！