Question

我的问题是，当输入是sass文件时，webpack会生成js和css文件。这是什么 webpack outputs。我只是希望css文件输出scss，而不是两者。我不知道如何去做。我希望有人能帮帮忙。这是我的代码。

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")

Webpack构建css和js文件

1 个答案: