webpack如何分割CSS代码？

Question

在webpack中可以使用CommonsChunkPlugin插件把vendor代码和应用代码分开。

但是CSS也会依赖一些库，比如normalize.css。这时怎么配置才能使得css依赖的库和自身的样式分别打包到不同的文件？

如下是我现在的配置，但是会把自身的样式和依赖的库打包到同一个文件。

const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    vendor: [
      'react',
      'react-dom',
    ],
    app: './src',
  },
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        loader: ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 15000,
            name: '../img/[name].[hash].[ext]',
          },
        },
      },
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: [
        'vendor',
        'manifest',
      ],
    }),
    new ExtractTextWebpackPlugin('../css/[name].[contenthash].css'),
    new HtmlWebpackPlugin({
      filename: '../index.html',
      template: './src/index.html',
    }),
    new CleanWebpackPlugin('dist'),
  ],
  // devtool: 'source-map',
};

Answer 1

有几个入口的js（如果导入了css），那么就会有几个对应的样式文件生成，命名规则同入口js文件。

Answer 2

直接link不就行了，没必要打包。

Answer 3

简单5步即可，亲测有效。

第１步：安装依赖

cnpm install normalize.css --save-dev

第２步：安装加载器

cnpm install css-loader --save-dev
cnpm install style-loader --save-dev

将 normalize.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。　　

第３步：webpack.config.js配置

module.exports = {
  module: {
    rules: [
      {
        //关键是以下两行
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

第４步：入口文件配置

import Normalize from 'normalize.css'

第５步：执行编译

编译结果：
成功将normalize.css插入项目页面中。

同理，也可以把animate.css添加到页面上，方法是一样的。
我的个人样式用sass的，入口文件import进来，然后再用scss-loader编译，css-loader引用，最终style-loader添加到页面即可。
有个问题就是没压缩文件，继续探索…

Answer 4

楼上没说到点啊！
模板参数才是正解，[name]是根据entery来的，打包多个css，同样也是根据entry来的，你肯定是自身的样式和依赖的库在同一个entry里面import的；

Answer 5

https://zhuanlan.zhihu.com/p/...这个兄弟总结的很到位