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

问题描述

问 题

看了一些教程

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

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

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

单独打包出normalize.css文件

解决方案

其实有两种方案：第一种是将 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...

这篇关于javascript - webpack 怎么单独打包第三方css库，比如normalize.css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！