加载css
安装css－loader style-loader
npm i css-loader style-loader --save-dev
配置loader
libs/parts.js
...
exports.setupCSS = function(paths) {
return {
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: paths
}
]
}
};
}
webpack.config.js
...
switch(process.env.npm_lifecycle_event) {
case 'build':
config = merge(
common,
parts.setupCSS(PATHS.app)
);
break;
default:
config = merge(
common,
parts.setupCSS(PATHS.app),
...
);
}
module.exports = validate(config);
parts.js中新建的test为正则表达式，表示匹配所有.css结尾的文件 ，配置的loader,先执行css-loader后执行style-loader,css-loser处理css文件中的@import和url,style-loader处理js文件中的require.include指定webpack搜索哪个目录,exclude指定不搜索哪个目录,如果不指定include，webpack就会搜索整个项目
创建一个css测试一下自动刷新
app/main.css
body {
background: cornsilk;
}
在app/index.js中引入样式文件
require('./main.css')
运行你的项目 npm start ,访问localhost:8080
试着修改背景色，看看是否局部自动刷新
下一章
方便调试的source map
进入下一章-sourcemap
本系列文章参考自surviceJS
