css loader
1.通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader,
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev
webpack.config.js中
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
探测到.css文件时则使用css-loader和style-loader
》index.css中引入require('./index.css');
3.在webpack打包之后是把样式文件打包进了index.js文件中
这将会导致网页加载过程中js加载造成的网页空白,--加载慢
1)cnpm install --save-dev extract-text-webpack-plugin@2.1.2
https://www.jianshu.com/p/439764e3eff2
(1)***css分离打包设置
var Ex = require('extract-text-webpack-plugin');/
(2)***webpack的 plugins 里面设置抽离出来的CSS文件名叫什么。
new Ex("css/[name].css")
(3)设置loader
loader: Ex.extract({
fallback:'style-loader',
use: "css-loader"
})