上篇里已经通过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