上篇里已经通过html webpack plugin生成了html 模板，并且可以配置像title, hash, minify, 接下来分析如何将css也bundle 进去，webpack是通过loaders来完成，可以参考这里：https://webpack.js.org/concepts/loaders/，还有中文版本的：https://doc.webpack-china.org/concepts/loaders/，先安装css-loader:
npm install css-loader --save-dev还需要安装style-loade (Adds CSS to the DOM by injecting a <style> tag)，一般它和css-loader一起使用，安装命令：
npm install style-loader --save-dev安装完成后，可以在package.json中看到他们的版本信息：
"devDependencies": {
"css-loader": "^0.28.7",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
}先在src目录下创建一个app.css：
body{ background-color: green }然后将loader配置到webpack.config.js中，添加一个module对象：
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] }
]
}特别注意的地方： [‘style-loader’,’css-loader’] 中的顺序不能写反，我最开始把css放在前面，结果就尴尬了，找了好久，才发现是顺序反了。
此时去运行index.html:
可以看到css样式已经bundle成功了。
下面研究sass(Syntactically Awesome Stylesheets)在webpack中的应用：
https://www.npmjs.com/package/sass-loader
这里还有一些介绍：
http://www.ruanyifeng.com/blog/2012/06/sass.html
先安装 sass-loader:
npm install sass-loader node-sass --save-dev安装完成就可以使用了，将sass-loader添加到webpack.config.js的module对象中，放在最后：
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader','sass-loader'] }
]
}同样在package.json可以看到多了sass-loader的dependency:
"devDependencies": {
"css-loader": "^0.28.7",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
}先把app.css 文件改成 app.scss格式的文件，在其中加一些sass code :
body{
background-color: green;
p {
color: red;
}
}再把app.js中的app.css 也要改成 app.scss：
const csss = require('./app.scss');再把webpack.config.js中的module改成下面：
module: {
rules: [
{ test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] }
]
},更改完成后，重新build，sass就被完全的解析成纯净的css 了 ,可以在页面中看到红色的段落了：
可以看到所有的样式都在<head>里面，我们可以尝试将这样样式通过引入外部文件的方式引进来，像这种模式：
<link rel="stylesheet" href="...." />extract-test-webapck-plugin可以做到，先安装这个dependency:
npm install --save-dev extract-text-webpack-plugin我用的是webpack 3，不同的版本命令也不同，可以参考这里：https://www.npmjs.com/package/extract-text-webpack-plugin，安装完成后，可以webpack.config.js中看到：
"devDependencies": {
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
}接下来在webpack.config.js，中声明：extract-text-plugin:
var ExtractTextPlugin = require("extract-text-webpack-plugin");再把module对象改成：
module: {
rules: [
{ test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use: ['css-loader','sass-loader'],
publicPath: "/dist"
})}
//['style-loader','css-loader','sass-loader']
]
}参考它的版本的breaking change:https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change
再在plugins对象中添加下面的代码：
new ExtractTextPlugin({
filename: "styles.css",
disable: false,
allChunks: true
})其中的styles.css就是我们的目标css。重新build之后，styles.css文件生成到dist目录下，extract text plugin会把.scss文件解析成纯净的css文件（styles.css），我们再看下页面的源码：
从<head>可以看出<link rel="stylesheet" href="...." />,达到预期效果，再看下这个时候的styles.css文件：
body {
background-color: green;
}
body p {
color: red;
}
// pure css参考地址：
https://doc.webpack-china.org/loaders/sass-loader/
https://webpack.js.org/guides/migrating/
https://github.com/webpack-contrib/extract-text-webpack-plugin