webpack对css的处理

原创 在下乃坑爹君 随笔 WebPack 330阅读 2017-06-30 08:29:37 举报

我们可以在js中引入样式文件

require('./index.css');
这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。
一般来说需要引入css-loader和style-loader,其中css-loader用于解析,而style-loader则将解析后的样式嵌入js代码。
安装:
$ npm install css-loader style-loader --save-dev

// webpack.config.js配置如下

webpack对css的处理

我们知道,webpack配置loader时是可以不写loader的后缀明-loader,因此css-loader可以写为css。
将样式抽取出来为独立的文件
将require引入的样式嵌入js文件中,有好处也有坏处。好处是减少了请求数,坏处也很明显,就是当你的样式文件很大时,造成编译的js文件也很大。
我们可以使用插件的方式,将样式抽取成独立的文件进行打包。

使用的插件就是extract-text-webpack-plugin

安装:
$ npm install extract-text-webpack-plugin@1.0.1 --save-dev //因为我自己装了最新的会报错,所以才选择1.0.1版本安装才没有报错,你们我就不知道了~

webpack对css的处理

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复