webpack 怎么单独打包第三方css库，比如normalize.css

Question

看了一些教程

基本上都是通过entry设置多入口，单独打包或者 通过webpack自带插件

entry: {
    main: main.js
    vender: [...]
} 
plugins: [
    new webpack.optimize.CommonsChunkPlugin(...)
  ]

可是指定的应该只能是js文件吧，单纯的css库文件应该不可以吧？
我要的是（以normalize.css为例）：

单独打包出normalize.css文件

Answer 1

其实有两种方案：第一种是将 css 文件在 js entry 中添加依赖；第二种直接设置 css entry。

第一种方案

// index.js
import 'normalize.css';
...

// webpack config
{
  entry: {
    index: './index.js'
  },
  ...
}

// output
index.js
index.css

这种是 Webpack 官方推荐的方案，但是每次都要把 css 放到 js entry 中才可以 extract 出来。

第二种方案（直接设置 css entry）

默认 Webpack 设置 css entry 除了 extract 出 css 文件还会多产生一个 js 文件，其实可以写个 Webpack 插件将其删除就可以了。为了使 Webpack 用起来方便我们写了这个工具：https://github.com/d-band/dool，可以直接设置 css entry，详细例子见：https://github.com/helloyou20...

Answer 2

既然是第三方的css，直接采用cdn上的资源即可，在html导入link标签，你这么做本末倒置了。

Answer 3

webpack入口只能是js，不过可以设置多个入口文件，单独引入你的css文件。

Answer 4

font awesome ? 这个你应该知道吧! 和你说的css库, 处理方法应该一样, 下面给出我的处理方法!!

1. npm 安装 font awesome
2. 然后 我会给每个页面设置一个入口 然后通用样式设置一个入口common/index.js
3. 然后在这个通用的入口下面require('node_modules/font-awesome/css/font-awesome.min.css');
4. 如果你只是某个页面需要 只需要在单个页面的入口require

Answer 5

看看这个是否是你想要的？ css-entry-webpack-plugin