1

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

我的配置文件看起来像这样，

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.

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

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

有任何想法吗？

4

1 回答 1

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"）和 application.css 文件。

谢谢，

于 2016-04-27T11:12:09.327 回答