安装及使用

// 安装
yarn add webpack webpack-cli --dev
// 运行
yarn webpack

配置文件

4版本以上的 webpack 支持零配置，webpack 默认以项目根目录下的 webpack.config.js 文件作为配置文件。

工作模式

webpack 4 新增了工作模式的用法，在运行时加上 “—mode mode”， 或者在配置文件中指定 mode。webpack 有三种工作模式：

• production ： 生产模式，也是默认的模式。
• development ：开发模式，添加一些调试的辅助信息。
• none ：不做任何处理。

  资源加载

  借助于 Loader，Webpack 几乎可以打包前端项目所有类型的文件。JS 文件的 Loader 是默认的。
  比如打包 CSS 文件用到的加载器是 css-loader 和 style-loader。如果指定多个 loader，Webpack 加载的顺序是从最后一个开始。style-loader 将样式通过 style 标签注入。

  // webpack.config.js
  module: {
    rules: [ // 加载规则
      {
        test: /.css$/,  // 匹配 css 文件
        use: [
          'style-loader', // 将样式通过 style 标签注入
          'css-loader'  // 先加载
        ]
      }
    ]
  }

导入资源模块

使用 Webpack 打包， 可以通过 import 在 JS 文件中引入其他非 JS 的文件。

import './main.css'  // 引入 css

文件资源加载器

file-loader 用于加载图片、字体等非文本文件。

// webpack.config.js 
module: {
    rules: [ // 加载规则
      {
        test: /.png$/,
        use: 'file-loader'
      }
    ]
}
// 导入一张图片并使用    
import icon from './icon.png'
const img = new Image()
img.src = icon

URL 加载器

对于一些小文件，比如将一些小型图片，可以将其转为 dataurl ，减少用 http 地址请求资源的请求次数。

// webpack.config.js 
module: {
    rules: [ // 加载规则
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10 KB，当资源小于 10 KB，实行转化，大于 10KB 依然返回 http 地址
          }
        }
      }
    ]
}

打包结果：

ES 2015

除 import、export外，Webpack 并不支持其他 ES 2015 特性，如果需要转化ES5，需要指定其他的 Loader。常用的是 babel-loader。

// webpack.config.js 
module: {
    rules: [ // 加载规则
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']   // 必须指定用于转化用的presets
          }
        }
      },
    ]
  }

Webpack 加载资源的方式

• 遵循 ES Modules 的 import 声明
• 遵循 CommonJS 标准的 require 函数
• 遵循 AMD 标准的 define 函数和 require 函数
• 样式代码中的 @import 命令和 url 函数
• HTML 代码中的图片标签的 src 属性

Loader 原理

loader 获取到源文件，对文件内容加以处理。无论经过多少个 loader 处理，最终返回的必须是一段 JS 代码。