03-02.使用Loader打包样式文件

2019-04-21 本文已影响0人 v刺猬v

使用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进行打包