码迷,mamicode.com
首页 > Web开发 > 详细

webpack打包css

时间:2017-06-02 23:09:13      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:code   bin   其他   安装   改变   ons   ack   参数说明   --   

1、第一种方式

1、安装css-loader和style-loader

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

2、引用的时候使用css-loader,让webpack可以打包css文件 

require(css-loader!./style.css);

技术分享

3、打包

技术分享

4、引入style-loader,将样式通过style标签写到head标签里

require(style-loader!css-loader!./style.css);

 2、第二种方式

1、引入css文件

require(./style.css);

2、webpack命令指定css文件的处理方式

$ webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader

技术分享

3、第三种方式

文件改变的时候自动打包

$ webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader --watch

技术分享

4、其他webpack打包时的参数说明

查看打包进度

$ webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader --progress

看见打包模块

$ webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader --progress --display-modules 

打包原因

$ webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader --progress --display-modules --display-reasons

 

webpack打包css

标签:code   bin   其他   安装   改变   ons   ack   参数说明   --   

原文地址:http://www.cnblogs.com/hongmaju/p/6935289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!