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 运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新。