搭建webpack构建环境(4)-css加载

加载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