vue实战--webpack基本使用二

使用webpack打包CSS

安装：npm i -D style-loader css-loader

【main.js】

// 导入 css 文件
import './css/app.css'

【配置前】npm run dev

【webpack.config.js】

// 配置各种资源文件的loader加载器
module: {
  // 配置匹配规则
  rules: [
    // test 用来配置匹配文件规则（正则）
    // use  是一个数组，按照从后往前的顺序执行加载
    //  创建style标签,将css转化为CommonJS代码
    {test: /\.css$/, use: ['style-loader', 'css-loader']}, 
  ]
}

使用webpack打包sass文件

安装：npm i -D sass-loader node-sass

【webpack.config.js】
module:{
  rules:[
  // 将Sass编译为css
    {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
  ]
}

图片和字体打包

• 安装：npm i -D url-loader file-loader
• file-loader：加载并重命名文件（图片、字体 等）
• url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中
  

【webpack.config.js】
module: {
  rules:[
    // 打包 图片文件
    { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },

    // 打包 字体文件
    { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
  ]
}

图片配置说明

• 1 默认将图片转为base64编码格式
• 2 limit参数的作用：
  
  • 限制图片的文件大小，单位为：字节(byte)
  • 文件重命名为哈希值，保证文件不会重复。例如：一张图片拷贝一个副本，这两个图片实际是同一个
• 3 规则：
  
  • 当图片文件大小（字节）小于指定的limit时，图片被转化为base64编码格式
  • 当图片文件大小（字节）大于等于指定的limit时，图片被重命名，不使用base64编码，此时，需要file-loader来加载图片

rules: [
    // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
    {
      test: /\.(jpg|png|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }
      ]

字体配置说明

• 1 url-loader 会将字体文件解析为 base64编码格式的字符串，嵌入到CSS样式中
• 2 file-loader 以文件形式加载字体文件