webpack打包css

一、第一种方式

一、安装css-loader和style-loader

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

二、引用的时候使用css-loader，让webpack能够打包css文件 

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

三、打包

四、引入style-loader，将样式经过style标签写到head标签里

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

 二、第二种方式

一、引入css文件

require('./style.css');

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

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

三、第三种方式

文件改变的时候自动打包

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

四、其余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

 五、在package.json中配置别名打包

 "start":"webpack",//start是webpack系统函数名

执行：

$ cnpm start

或者不使用start，自定义如：

 

执行：