Zendq1998/blog

02-webpack核心概念

Opened this issue · 0 comments

loader

loader 是打包的方案,它告诉了 webpack 对于一些特定的文件该如何进行打包。

模块不一定只有 js 文件,可能还有 css、png 等文件。webpack 默认只能识别 js 文件,若是想引入别的文件,比如 import Avatar from './avatar.png',执行 webpack 命令之后遇到这行代码,它还并不知道该如何去打包 png 格式的文件,就会去 webpack.config.js 配置文件中去寻找如何打包。

图片文件

module.exports = {
  // ...
  rules: [
    {
      test: /\.png$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // placeholder
          outputPath: 'images/',
        },
      },
    },
  ],
  // ...
};

以上的配置就是告诉 webpack 打包模块的规则,当遇到了以 .png 结尾的文件时,应该使用 file-loader 来对它进行打包。

file-loader 的打包过程:

  1. 将静态文件移动到配置的 outputPath 目录下(默认是 dist ),并重命名(可以通过placeholder配置)
  2. 将新得到的文件相对于 dist 的地址返回给引入它的变量

图片的打包也可以用 url-loader,会把图片直接转化成 base64:

 rules: [
      {
        test: /\.png$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]', // placeholder
            outputPath: 'images/',
            limit: 2048,
          },
        },
      }
    ],

使用 url-loader,根据 options.limit 选项,若图片大小小于 2kb,则图片会直接被打包生成 base64 字符串直接返回在打包生成的 js 文件内,若大于 2kb,则会像 file-loader 一样打包。

file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。

样式文件

  • css 文件

为了在 JavaScript 模块中 import 一个 css 文件,需要安装 style-loader 和 css-loader,并在 module 配置中这样添加 rules:

rules: [
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  },
];

css-loader 能让 css 文件识别类似 @import './test.css' 的语法,将多个 css 文件合并成一个 css 文件。

style-loader 作用是将最终生成的 css 代码字符串挂载到 header 标签的 style 标签底下。

  • sass

使用 sass-loader

rules: [
  {
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  },
];

打包过程:首先通过 sass-loader 对文件进行翻译,变成 css,再通过 css-loader 和 'style-loader 完成打包。

css module

// ...
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true, // 支持 css 模块化
            },
          },
          'sass-loader',
        ],
      }
// ...

plugins

plugins 可以在 webpack 打包的某个时刻帮我们做一些事情。

HtmlWebpackPlugin 会再打包结束后自动生成一个 html 文件,并把打包生成的 js 自动引入到这个 html 文件中。

// ...
  plugins: [new HtmlWebpackPlugin({
    template: './index.html'
  })]
// ...

index.html 是自动生成的 html 的模版。

Devtool

此选项控制是否生成,以及如何生成 source map。

sourceMap 是一个映射关系,他知道打包生成的 js 代码每一行对应的是源代码的哪个 js 文件中哪一行代码。更容易追踪错误。

使用了 sourceMap 会使打包的速度变慢,会生成 main.js.map,这个文件会对打包后的代码和源代码生成映射关系。

webpack-dev-server

webpack-dev-server 提供了一个简单的 web server,并且具有 live reloading 功能。

  • 安装

npm install webpack-dev-server -D

  • webpack 配置文件
// ...
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8888,
  },
// ...

执行命令 webpack-dev-server

contentBase 告诉 dev server 从哪个未知查找文件;open 表示自动打开浏览器;

webpack-dev-server 并不会像 webpack 一样将打包好的文件放在 dist 目录,而是放在内存中,这样能够提升打包的速度。

模块热更新

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块,而无需完全刷新。