Webpack bundle split commonschunkプラグイン

Question

私はベンダーバンドルを分割するのにCommonsChunkPluginを使用しています。私はまた、ExtractTextPluginを1つのファイルにCSSを抽出することがあります。しかし、何らかの理由で、vendor.cssも取得しています。

ここに私のWebPACKの設定です：

const config = { 
    output: { 
    publicPath: '/blaze-assets/', 
    }, 

    cache: isDebug, 

    stats: { 
    colors: true, 
    reasons: isDebug, 
    hash: isVerbose, 
    version: isVerbose, 
    timings: true, 
    chunks: isVerbose, 
    chunkModules: isVerbose, 
    cached: isVerbose, 
    cachedAssets: isVerbose, 
    }, 

    plugins: [ 
    new ExtractTextPlugin({ 
     filename: isDebug ? '[name].css' : '[name].[chunkhash].css', 
     allChunks: true, 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: isDebug, 
    }), 
    ], 

    resolve: { 
    extensions: ['.webpack.js', '.web.js', '.js', '.jsx', '.json'], 
    modules: [ 
     path.resolve('./src'), 
     'node_modules', 
    ] 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     include: [ 
      path.resolve(__dirname, '../src'), 
     ], 
     loader: 'babel-loader', 
     }, { 
     test: /\.(scss|css)$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      'css-loader', 
      'sass-loader', 
      ] 
     }) 
     }, { 
     test: /\.txt$/, 
     loader: 'raw-loader', 
     }, { 
     test: /\.(otf|png|jpg|jpeg|gif|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url-loader?limit=10000', 
     }, { 
     test: /\.(eot|ttf|wav|mp3)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file-loader', 
     }, { 
     test: /\.jade$/, 
     loader: 'jade-loader', 
     } 
    ], 
    }, 
}; 

// 
// Configuration for the client-side bundles 
// ----------------------------------------------------------------------------- 
let clientBundles = {} 

Object.keys(bundles).forEach(function (bundle) { 
    clientBundles[bundle] = [ 
    'bootstrap-loader', 
    `./src/bundles/${bundle}/index.js` 
    ] 
}) 

merge(
    clientBundles, 
    { 
    'embedWidget': ['./src/components/Widgets/EmbedWidget/widgetLoader.js'] 
    }, 
) 

const clientConfig = extend(true, {}, config, { 
    entry: clientBundles, 
    output: { 
    path: path.join(__dirname, '../build/public/blaze-assets/'), 
    filename: isDebug ? '[name].js' : '[name].[chunkhash].js', 
    chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js', 
    }, 
    node: { 
    fs: "empty" 
    }, 
    // Choose a developer tool to enhance debugging 
    // http://webpack.github.io/docs/configuration.html#devtool 
    devtool: isDebug ? 'cheap-module-source-map' : false, 
    plugins: [ 
    // Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk). 
    // http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: function (module) { 
     // This prevents stylesheet resources with the .css or .scss extension 
     // from being moved from their original chunk to the vendor chunk 
     if(module.resource && (/^.*\.(css|scss)$/).test(module.resource)) { 
      return false; 
     } 
     return module.context && module.context.indexOf("node_modules") !== -1; 
     }, 
    }), 
    ...config.plugins, 
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
    new webpack.DefinePlugin({ 
     ...GLOBALS, 
     'process.env.BROWSER': true 
    }), 
    ...(!isDebug ? [ 
     new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      // jscs:disable requireCamelCaseOrUpperCaseIdentifiers 
      screw_ie8: true, 

      // jscs:enable requireCamelCaseOrUpperCaseIdentifiers 
      warnings: isVerbose, 
      unused: true, 
      dead_code: true, 
     }, 

     }), 
     new webpack.optimize.AggressiveMergingPlugin(), 
    ] : []), 
    new AssetsPlugin({ 
     path: path.join(__dirname, '../build'), 
     filename: 'assets.json', 
     prettyPrint: true, 
    }), 
    ], 
}); 

は、私は、ドキュメントごとのようにすべてのものを踏襲しますが、設定で間違っているかを把握することはできませんか？私は使用していますwebpack 2とextract-text-webpack-plugin: 2.1.0

ウェブパックの出力は次のようになります。出力には期待外のvendor.cssがあります。

Answer 1

node_modulesでSCSS/CSSファイルに異なるローダー設定を使用すると、node_modulesの下にあるファイルにExtractTextPluginを適用しないでください。

{ 
    test: /\.(scss|css)$/, 
    exclude: [/node_modules/], // Add this line under your current configs 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     'css-loader', 
     'sass-loader', 
    ] 
    }) 
}, 

// Add a new rule for those under node_modules 
{ 
    test: /\.(scss|css)$/, 
    include: [/node_modules/], 
    loaders: [ 
    'style-loader', 
    'css-loader', 
    'sass-loader', 
    ] 
}