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

fcxh
  • 434

看了一些教程

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

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

可是指定的应该只能是js文件吧,单纯的css库文件应该不可以吧?
我要的是(以normalize.css为例):

单独打包出normalize.css文件

回复
阅读 5.4k
5 个回答

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

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

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

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

1. npm 安装 font awesome
2. 然后 我会给每个页面设置一个入口 然后通用样式设置一个入口common/index.js
3. 然后在这个通用的入口下面require('node_modules/font-awesome/css/font-awesome.min.css');
4. 如果你只是某个页面需要 只需要在单个页面的入口require
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏