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

【问题标题】：Get one css file from webpack multiple entry points从 webpack 多个入口点获取一个 css 文件
【发布时间】：2017-07-27 19:48:31
【问题描述】：

我在我的项目中使用 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 为每个入口点生成一个包，但是有没有可能得到一个文件？

【问题讨论】：

标签： webpack extract-text-plugin

【解决方案1】：

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

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

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

【讨论】：