1

我在我的项目中使用 webpack。我有 2 个入口点：第一个用于带有 CSS 模块的 CSS 文件，第二个用于全局 css 文件。Main.css 不是从项目中的任何文件导入的，所以我为它创建了一个特殊的入口点。

const extractStylesCss = new ExtractTextPlugin('styles.css');  

entry: {
    'main': ["./src/index.tsx"],
    'styles': "./src/main.css"
},
module: {
    loaders: [ 
        {
            test: /^.*\.css$/,
            exclude: [
                path.join(__dirname, 'src/main.css')
            ],

            loader: extractStylesCss.extract(
                "style",
                `css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?pack=pure&sourceMap=inline`
            )
        },
        {
            test: /main\.css$/,
            loader: extractStylesCss.extract('style', 'css!postcss?pack=pure&sourceMap=inline')
        },
    ]
},
plugins: [
    extractStylesCss
],
output: {
    path: path.join(__dirname, "/docs"),
    filename: "[name].js"
}

我只需要一个输出文件——styles.css。我知道 ExtractTextPlugin 为每个入口点生成一个包，但是有没有可能得到一个文件？

4

1 回答 1

6

通过将其添加到条目中，您有正确的想法，不幸的是您创建了另一个捆绑包。对象的每个属性entry都会创建一个单独的包，这就是为什么style.js即使它只包含 webpack 引导代码并且extract-text-webpack-plugin如果您为两者使用相同的输出文件，也会覆盖 CSS 文件的原因。

你真正想要的是添加main.css到主包中（它在概念上应该是它的一部分，而不是在一个单独的包中）。这些条目还接受具有多个入口点的数组。与以下entryCSS 将自动组合：

entry: {
    main: ['./src/index.tsx', './src/main.css']
},
于 2017-03-07T21:41:22.447 回答