# Loader

当打包到非 JS 文件的时候,webpack 会在module中配置里查找,然后根据rules中的test选择一个 loader 来处理。

# 打包静态资源

# 打包图片

# file-loader

当发现是图片,使用 file-loader 来打包 file-loader 做的事:

  • 将图片移到 dist 目录下
  • 给图片改个名字
  • 将名字返回给引入模块的变量中
module: {
    rules: [{
        test: /\.jpg$/,
        use: {
            loader: 'file-loader'
        }
    }]
},

# 配置项

让图片打包出来的名字与拓展名与原来一样 '[name].[ext]' 这种语法叫 placehoder 即占位符

rules: [
  {
    test: /\.jpg$/,
    use: {
      loader: 'file-loader',
      // option 为配置参数
      options: {
        // 图片打包出来的名字和后缀原来的一样
        name: '[name]_[hash].[ext]',
      },
    },
  },
];

# url-loader

将文件打包为 Base64 编码,当图片特别小(1~2k)的时候适用。

但是大图片不使用,可以给它加上一个limit来限制

rules: [
  {
    test: /\.(jpg|png|gif)$/,
    use: {
      loader: 'url-loader',
      // option 为配置参数
      options: {
        limit: 2048,
      },
    },
  },
];

# 打包样式

{
    test: /\.css$/,
    // 一种文件多个Loader就使用数组
    use: [
        'style-loader', 'css-loader'
    ]
}
  • css-loader 能帮我们分析出几个 CSS 文件之间的关系
  • style-loader 在得到 css-loader 生成的文件后,style-loader 会将这段样式挂在到 header 标签中

# 使用 sass (opens new window)

loader 是有顺序的,顺序是:从数组的最后一个依次向前处理。

use: [
  'style-loader', // creates style nodes from JS strings
  'css-loader', // translates CSS into CommonJS
  'sass-loader', // compiles Sass to CSS, using Node Sass by default
];

# 厂商前缀 postcss-loader (opens new window)

use: [
  'style-loader', // creates style nodes from JS strings
  'css-loader', // translates CSS into CommonJS
  'postcss-loader', // compiles Sass to CSS, using Node Sass by default
];

它可以进行配置,要创建一个postcss.config.js文件

module.exports = {
  plugins: [require('autoprefixer')],
};

autoprefixer这个插件可以帮我们添加厂商前缀

# importLoaders

在 sass 文件中又 使用@import的方式去引入了其他文件,可能就会导致在打包时直接走 css-loader,而不会去走下面的两个 loader

importLoaders就是让@import方式引入方式的文件也走下面的两个 loader

use: [
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
    },
  },
  'sass-loader',
  'postcss-loader',
];

# CSS modules

css-loader 直接将其打包注入到 header 中,可能造成 CSS 的干扰。即一个文件中引入了一个 CSS,其他地方都会受到影响

解决方法是配置modules

{
    loader: "css-loader",
    options:{
        importLoaders: 2,
        modules: true
    }
},

引入样式时使用 style.className 方式:

import style form './style.sass'
// 添加样式

const img = new Image();
img.src = girl;

img.classList.add(style.girl)

# 打包字体

打包时如果有字体文件的话打包又会报错,因为不认识字体文件。而对字体文件的打包只需要file-loader就可以了

{
    test: /\.(eot|ttf|svg)$/,
    use: {
        loader: 'file-loader'
    }
}

# 介绍下 webpack 热更新原理,是如何做到在不刷新浏览器的前提下更新页面的

  1. 当修改了一个或多个文件; 2.文件系统接收更改并通知 webpack;
  2. webpack 重新编译构建一个或多个模块,并通知 HMR 服务器进行更新;
  3. HMR Server 使用 webSocket 通知 HMR runtime 需要更新,HMR 运行时通过 HTTP 请求更新 jsonp;
  4. HMR 运行时替换更新中的模块,如果确定这些模块无法更新,则触发整个页面刷新。