Webpack 4（二）

Webpack URL 加载器

Data URLS

传统的 url 要求服务器上有个对应的文件，通过请求地址得到该文件，而 Data URLS 则是当前 URL 就可以直接表示文件内容的方式，这种 URL 中的文本就已经包含了文件内容，当我使用此种 URL 时，就不会再发送 HTTP 请求。

• 小文件使用 Data URLS，减少请求次数
• 大文件单独提取存放，提高加载速度

url-loader

安装 url-loader

yarn add url-loader@2.2.0

// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')

module.exports = {
  // 设置工作模式
  // mode: 'development',
  mode: 'none',
  // 指定打包入口文件的路径，如是相对路径，./ 不可省略
  entry: './src/main.js',
  // 输出文件配置
  output: {
    filename: 'bundle.js',
    // 用来存放打包后文件的输出目录，只能使用绝对路径
    path: path.join(__dirname, 'dist'),
    // 指定资源文件引用的目录，'': 默认值，表示网站根目录，dist /不能省略
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        // 从后往前执行，先执行最后一个 loader，这里会先执行 css-loader
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      // {
      //   test: /.png$/,
      //   use: 'file-loader'
      // },
      {
        test: /.png$/,
        use: 'url-loader'
      }
    ]
  }
}

配置选项实现大文件单独存放

注意：一定要同时安装 file-loader

 {
	test: /.png$/,
	 use: {
	  loader: 'url-loader',
		options: {
		  limit: 10 * 1024 // 10 KB，只讲 10KB 以下的图片转换成 data url, 超过的仍然会交给 file-loader 处理
		}
	}
 }

// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')

module.exports = {
  // 设置工作模式
  // mode: 'development',
  mode: 'none',
  // 指定打包入口文件的路径，如是相对路径，./ 不可省略
  entry: './src/main.js',
  // 输出文件配置
  output: {
    filename: 'bundle.js',
    // 用来存放打包后文件的输出目录，只能使用绝对路径
    path: path.join(__dirname, 'dist'),
    // 指定资源文件引用的目录，'': 默认值，表示网站根目录，dist /不能省略
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        // 从后往前执行，先执行最后一个 loader，这里会先执行 css-loader
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      // {
      //   test: /.png$/,
      //   use: 'file-loader'
      // },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10 KB，只讲 10KB 以下的图片转换成 data url, 超过的仍然会交给 file-loader 处理
          }
        }
      }
    ]
  }
}

Webpack 常用加载器分类

• 编译转化类

  

• 文件操作类

  

• 代码检查类

  

Webpack 与 ES 2015

因为模块打包需要，所以处理 import 和 export。但 es6 其他特性并不能直接转换。

• Webpack 只是打包工具
• 加载器可以用来编译转换代码

安装 babel-loader 插件

yarn add babel-loader @babel/core @babel/preset-env --dev

// webpack.config.js
rules: [
    {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
]

Webpack 加载资源的方式

在代码有引用资源可能性的地方，都会被 webpack 找出来，然后根据配置交给不同的 loader 去处理，最后将处理的结果整体打包到输出目录。

• 遵循 ES Modules 标准的 import 声明

  

• 遵循 CommonJS 函数的 require 函数

  

• 遵循 AMD 标准的 define 函数和 require 函数

  

• *样式代码中的 @import 指令和 url 函数

• *HTML 代码中图片标签的 src 属性

引用 css

// ./reset
* {
  margin: 0;
  padding: 0;
}

// ./main.css
@import url(reset.css);

body {
  min-height: 100vh;
  background: #f4f8fb;
  background-image: url(background.png);
  background-size: cover;
}

// ./main.js
import './main.css'

引入 HTML

// ./footer.html
<footer>
  <!-- <img src="better.png" alt="" width="256"> -->
  <a href="better.png">download png</a>
</footer>

// ./main.js
import footerHtml from './footer.html'

document.write(footerHtml)

问题：未找到 a 标签 href 所对应的图片文件

原因：html-loader 默认只会去处理 img 标签的 src 属性

解决：让其他标签的属性也能触发 webpack 去打包，添加 html-loader options.attrs 属性

// webpack.config.js
module: {
   rules: [
     {
        test: /.html$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: ['img:src', 'a:href']
          }
        }
      }
   ]
}

Webpack 核心工作原理

Loader 机制是 Webpack 的核心

在项目中一般都会散落着各种代码以及资源文件，webpack 会根据我们的配置找到其中的一个文件作为打包的入口，一般情况下该文件会是 JS 文件，接着会顺着入口文件中的代码，根据 import 或 require 之类的语句，解析推断出该文件所依赖的资源模块，再分别去解析每个资源模块对应的依赖，最后就形成了整个项目中所有用到文件之间的依赖关系树，webpack 会递归该数，然后找到每个节点所对应的资源文件，最后再根据配置文件中的 rules 属性去找对模块所对应的加载器去加载该模块，接着把加载到的结果放入到 bundle.js 中，从而实现整个项目的打包。