由浅入深webpack - 04.05 处理css

[Pasoul]

loader

webpack允许我们在js模块中importcss文件，这一切归功于强大的loader，可以使你在import或‘加载’模块时预处理文件，编译普通css模块一般使用style-loader和css-loader，后者将解析(resolve) import/require()的css模块，包括处理css中的url()和@import，前者将解析后的样式嵌入到style标签中，内联到html的head标签

使用style-loader和css-loader

安装

npm install style-loader css-loader --save-dev

用法

建议将style-loader和css-loader结合使用 项目目录：

• dist 存放打包后的文件

• src/css 创建极简单的样式 base.css:

  html{
  background: #f00;
  }

• app.js 引入css文件 import './css/base.css'

• webpack.config.js

  
  var path = require('path')

module.exports = { entry: { app: './src/app.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, module: { rules: [ { test: /.css$/, use: ['style-loader', 'css-loader'] } ] } }

- index.html 引入打包后的app.bundle.js
运行webpack，浏览器中查看html，发现head标签增加了style，里面正是base.css的样式，说明我们在app.js中成功引入了css模块
![image](https://user-images.githubusercontent.com/22902187/38467865-979147ea-3b70-11e8-86a0-d0caa85b5b90.png)

## 如何通过link标签的形式引入css样式
修改webpack.config.js

var path = require('path')

module.exports = { entry: { app: './src/app.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js', publicPath: './dist/' // 为了使资源保持正确的路径，必须设置 webpack 配置中的 output.publicPath 属性，以便生成绝对路径 }, module: { rules: [ { test: /.css$/, use: [ { loader: 'style-loader/url' }, { loader: 'file-loader' } ] } ] } }

执行webpack打包，浏览器中查看html文件，原来style标签的内容通过link方式引入进来
![image](https://user-images.githubusercontent.com/22902187/38467806-3d3159fc-3b70-11e8-91f6-7329c5649f8e.png)
同时dist目录生成单独的css文件，但是这种方法比较小众，如果引入多个css模块，会产生多余的http请求
![image](https://user-images.githubusercontent.com/22902187/38467847-6e499ffe-3b70-11e8-91f5-dbfe859604c1.png)