Question

我将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每个入口点生成一个包，但是有可能获得一个文件吗？

Answer 1

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

你真正想要的是将main.css添加到主包中（它应该在概念上属于它，而不是单独的包中）。条目还接受具有多个入口点的数组。使用以下entry，CSS将自动合并：

entry: {
    main: ['./src/index.tsx', './src/main.css']
},

从webpack多个入口点获取一个css文件

1 个答案: