CSS 未使用 extract-text-webpack-plugin 提取公共块

Question

不确定这是一个错误还是我的设置，我正在使用 CommonsChunkPlugin 为我的项目中的三个入口点获取单独的 common.js，并使用 extract-text-webpack-plugin 来获取 css 文件。我的入口点是应用程序、登录和注册。我能够得到：

app.js
app.vendor.js
login.js
register.js
common.js

对于css：

app.css 
register.css
login.css

我似乎无法生成 common.css。所有 css 都被塞进一个 app.css 文件中。

我的项目是基于 vuetify webpack 模板设置的： https://github.com/vuetifyjs/webpack-advanced

这是我的配置：

3 个入口点：

module.exports = {
  entry: {
    app: './src/main.js',
    login: './src/Login/login.js',
    register: './src/Register/register.js'
 },

插件 - 每个入口点都有 HtmlWebpackPlugin（只显示一个）：

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
  template: 'index.html',
  inject: false,
  hash: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: false,
    minifyJS: true
  },
  chunksSortMode: appChunkOrder
}),

常见区块：

new webpack.optimize.CommonsChunkPlugin({
  name: 'app.vendor',
  chunks: ['app'],
  minChunks: isVendor,
}),    
new webpack.optimize.CommonsChunkPlugin({
  name: 'login.vendor',
  chunks: ['login'],
  minChunks: isVendor,
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'register.vendor',
  chunks: ['register'],
  minChunks: isVendor,
}),    
// Extract chunks common to both app and login
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['app.vendor', 'login.vendor', 'register.vendor', 'app', 'login', 'register'],
  minChunks: (module, count) => count >= 2 && isVendor(module),
}),

完整配置：

plugins: [
new webpack.DefinePlugin({'process.env': env }),
new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
}),
new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true
  }
}),
// generate Html index files for 3 entries:
new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
  template: 'index.html',
  inject: false,
  hash: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: false,
    minifyJS: true
  },
  chunksSortMode: appChunkOrder
}),
new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'src/Login/login.html'
    : config.build.login,
  template: 'src/Login/login.html',
  inject: false,
  hash: true,
  minify: false,
  chunksSortMode: loginChunkOrder
}),
new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'src/Register/register.html'
    : config.build.register,
  template: 'src/Register/register.html',
  inject: false,
  hash: true,
  minify: false,
  chunksSortMode: registerChunkOrder
}),    
// Chunks:
new webpack.optimize.CommonsChunkPlugin({
  name: 'app.vendor',
  chunks: ['app'],
  minChunks: isVendor,
}),    
new webpack.optimize.CommonsChunkPlugin({
  name: 'login.vendor',
  chunks: ['login'],
  minChunks: isVendor,
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'register.vendor',
  chunks: ['register'],
  minChunks: isVendor,
}),    
// Extract chunks common to both app and login
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['app.vendor', 'login.vendor', 'register.vendor', 'app', 'login', 'register'],
  minChunks: (module, count) => count >= 2 && isVendor(module),
}),
// copy custom static assets
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  }
])

感谢任何帮助！

Answer 1

我有一个非常相似的设置并且设法让它工作。对我来说，关键部分是在 .js 文件而不是 .scss 文件中导入常用样式。

简而言之，这是我的项目：

common/
  main.scss    <-- common styles
app/
  index.js
  main.scss    <-- styles specific for app
admin/
  index.js
  main.scss    <-- styles specific for admin
registration/
  index.js
  main.scss    <-- styles specific for registration
base.html
webpack.config.js

app/index.js:

import '../common/main'   // <-- this did the trick!
import './main'

// some js...

admin/index.js和registration/index.js都非常相似。

webpack.config.js（仅重要部分，使用了一些ES6语法）：

const entries = {
  app: 'app/index.js',
  admin: 'admin/index.js'
  registration: 'registration/index.js',
};

const commonChunks = [
  'vendor',
  'common',
];

function isVendor(module) {
  if (typeof module.context !== 'string') {
    return false;
  }
  return module.context.indexOf('node_modules') !== -1;
}

export default {
  entry: {...entries},

  // ...

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: '[name].bundle.js',
      minChunks: 2
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].bundle.js',
      chunks: [...Object.keys(entries), 'common'],
      minChunks: function(module) {
        return isVendor(module);
      }
    }),

    new ExtractTextPlugin({
      filename: '[name].bundle.css'
    }),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'base.html'),
      filename: 'app.html',
      chunks: [...commonChunks, 'app'],
      chunksSortMode: 'manual'
    }),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'base.html'),
      filename: 'admin.html',
      chunks: [...commonChunks, 'admin'],
      chunksSortMode: 'manual'
    }),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'base.html'),
      filename: 'registration.html',
      chunks: [...commonChunks, 'registration'],
      chunksSortMode: 'manual'
    })
  ]
};

我最初的方法是在其他 .scss 文件中导入 common/main.scss，例如

app/main.scss:

@import '../common/main'

// styles specific for app

但这没有用，我想出了上面的解决方案。

此外，在我的情况下需要添加 chunksSortMode: 'manual'，因为 HtmlWebpackPlugin 有时会以错误的顺序包含脚本。

CSS 未使用 extract-text-webpack-plugin 提取公共块

CSS not extracted for common chunk with extract-text-webpack-plugin

webpack-2

bundling-and-minification

extract-text-plugin

commonschunkplugin

extracttextwebpackplugin