使用Loader打包样式文件
首先对上一节的代码进行编辑（/source_code/03/03-02）
文件结构
- dist
- index.html
- images
- avatar.jpg
- src
- index.js
- index.css
- webpack.config.js
代码：
- src/index.js
import avatar from '../images/avatar.jpg'
import './index.css'
let img = new Image()
img.src = avatar
img.classList.add('avatar')
let root = document.getElementById('root')
root.appendChild(img)
- src/index.css
.avatar {
width: 150px;
}
直接运行打包，控制台输出
ERROR in ./source_code/03/03-02/src/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
原因在于webpack并不能直接识别.css格式的文件，这时我们就需要借助loader对css样式文件进行编译打包
使用css-loader和style-loader
- 安装style-loader和css-loader
npm i style-loader, css-loader -D
- 再次执行打包命令
这次就打包成功了，我们再次修改一下代码结构
- 创建avatar.css
.avatar {
width: 150px;
}
- 修改index.css
@import './avatar.css'
重新打包，依旧成功编译打包成功。那我们看下css-loader和style-loader执行，都做了些什么。
- 首先css-loader将其他文件所有文件，包括通过
@import语法导入的文件，整合到一起。 - 其次style-loader将这些css，以一个
style元素的形式插入到入口文件（index.html）的header元素当中。
WX20190419-184606@2x.png
这样webpack就能识别css样式文件，并作为模块，被引入到项目文件中了。
编译打包scss样式文件（/source_code/03/03-03）
- 将项目中的css文件更改为
.scss格式的文件，并将对应的引入依赖，也进行相应的修改 - 安装node-sass包，
npm i node-sass -D - 安装sass-loader，
npm i sass-loader -D - 修改webpack对应的配置
//...
module: {
rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]
}
//...
- 运行
npm run bundle进行打包
在webpack的配置中，loader是有先后顺序的要求的。loader的执行顺序是从下到上，从右到左。所以use: ['style-loader', 'css-loader', 'sass-loader']中，我们先使用sass-loader，对sass语法进行翻译，再使用css-loader，对样式进行整合，最后，使用style-laoder将整理好的样式，插入到目标文件的header元素中。
使用postcss-loader为样式增加厂商前缀
- 安装postcss-loader：
npm i -D postcss-loader - 安装autoprefixer：
npm i -D autoprefixer - 在项目目录下创建
postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
- 修改webpack.config.js的相关配置
//...
module: {
rules: [{
test: /\.jpg$/,
use: 'file-loader'
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
}]
}
//...
- 执行
npm run bundle命令进行打包
WX20190419-193224@2x.png
我们可以看到postcss-loader和autoprefixer已经为相关的CSS3语法的代码，加入了对应的厂商前缀。
css-loader中一些常用的配置项
- importLoaders，能够确保所有主动引入的scss文件和通过
@import语法在其他文件引入的scss文件，都能够被所有的loader处理
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2 // Number of loaders applied before CSS loader
}
},
'postcss-loader',
'sass-loader'
]
}
- CSS模块化：有些时候，我们不想通过全局引入的方式（
import './avatar.scss'），引入css，因为这样会影响全局的css样式，这时我们可以通过使用CSS模块化来解决问题，通过使用CSS模块化，可以将引入的css的作用范围，控制在当前引入这个css的模块之内，这样可以避免样式耦合和冲突。
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2 // Number of loaders applied before CSS loader
modules: true // 开启CSS模块化
}
},
'postcss-loader',
'sass-loader'
]
}
- 创建
src/avatar.js文件
import avatar from '../images/avatar.jpg'
function Avatar() {
let root = document.getElementById('root')
let img = new Image()
img.src = avatar
root.appendChild(img)
}
export default Avatar
- 修改
src/index.js
import avatar from '../images/avatar.jpg'
import style from './index.scss' //CSS模块化语法
import Avatar from './avatar'
new Avatar()
let img = new Image()
img.src = avatar
img.classList.add(style.avatar) // 模块化的使用CSS样式类
let root = document.getElementById('root')
root.appendChild(img)
使用webpack打包字体文件（/source_code/03/03-04）
- 进入iconfont网站，下载字体文件
- 创建字体目录
font，将下载的字体文件拷贝到其中 - 编辑
src/index.scss
@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot?t=1555679325036'); /* IE9 */
src: url('../font/iconfont.eot?t=1555679325036#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff?t=1555679325036') format('woff'),
url('../font/iconfont.ttf?t=1555679325036') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1555679325036#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconpaper:before {
content: "\e662";
}
@import './avatar.scss'
- 创建
src/index.js，并引入index.scss
import './index.scss'
let root = document.getElementById('root')
let icon = document.createElement('i')
icon.classList.add('iconfont', 'iconpaper')
root.appendChild(icon)
- 安装
file-loader：npm i -D file-loader - 修改
webpack.config.js增加对应的配置
{
test: /.(eot|svg|ttf|woff|woff2)/,
use: 'file-loader'
}
- 执行
npm run bundle进行打包
网友评论