Question

我正在尝试使用webpack和extract-text-webpack-plugin创建包含多个条目的React应用程序。

我的配置文件如下所示，

const commonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const extractTextPlugin = require('extract-text-webpack-plugin');

let config = {
  entry: {
    app: './client/app.entry.js',
    signIn: './client/sign-in.entry.js',
  },
  output: {
    path: './server/public',
    filename: '[name].js'
  },

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.css$/,
        loader: extractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
      }
    ]
  },

  resolve: {
    modulesDirectories: ['node_modules', 'client'],
    extensions: ['', '.js']
  },

  plugins: [
    new commonsChunkPlugin('common', 'common.js'),
    new extractTextPlugin('styles.css', { allChunks: true })
  ]
};

module.exports = config;

我的问题是extract-text-webpack-plugin只包含来自条目块的导入的css文件，而不是来自条目块的子模块。

所以如果app.entry.js有

import "./app-style.css";
import "./sub-module"; // This module has import "./sub-style.css";

然后来自app-style.css的样式被捆绑，但不是来自sub-style.css的样式。

之前我只有一个条目文件没有这个问题，所以我想知道是否有多个条目需要另外一个设置？

还要考虑的是使用css-loader的方式使用CSSModule，这也可能是一个因素。

有什么想法吗？

Answer 1

我正在尝试解决类似的问题，我认为为那些有相同问题的人记录解决方案和想法会很好。

TextExtract插件可以使用必须使用commonchunks插件配置的块，启用块支持：

// Configuration of the extract plugin with chunks and naming
new ExtractTextPlugin("[name].css", {  allChunks: true })

一切都是）接下来只是配置块（webpack是非常灵活的工具，每个人都根据自己的需要配置它。对于一个实例，我将展示如何配置“vendour.css”和“application.css”构建基于“进口”的配置）

// Vendour chunks definition for vendor css
entry: {
  vendor : ['./css/vendour.sass']

入口点file.js

的示例

import "./css/vendor.sass"
import "./css/application.sass"

构建之后，webpack将创建vendor.css（使用@import "~vendormodules/sass/alla"导出vendour的东西）和application.css文件。

谢谢，

如何使用webpack从子模块中提取css导入？

1 个答案: