feat(assets): 加载资源 images、svg、media、fonts

CHANGELOG.md

@@ -15,6 +15,7 @@
  asdasdasdas | 你爱哈的 | [ea12f9c](https://github.com/luoxue-victor/learn_webpack/commit/ea12f9c)
  auto readme | 自动生成 readme 文件 | [1e0a526](https://github.com/luoxue-victor/learn_webpack/commit/1e0a526)
  autoprefixer | css 自动添加前缀 | [4e88451](https://github.com/luoxue-victor/learn_webpack/commit/4e88451)
+ case-sensitive=paths | 严格区分大小写 | [164b04d](https://github.com/luoxue-victor/learn_webpack/commit/164b04d)
  config | add config  option | [83c9f1e](https://github.com/luoxue-victor/learn_webpack/commit/83c9f1e)
  create readme | 创建readme | [571bfaa](https://github.com/luoxue-victor/learn_webpack/commit/571bfaa)
  daasd | asdasd | [0b6ee85](https://github.com/luoxue-victor/learn_webpack/commit/0b6ee85)

README.md

@@ -30,6 +30,7 @@
 - [课时 14：升级 webpack5](./docs/课时-14.md)
 - [课时 15：定义通用变量](./docs/课时-15.md)
 - [课时 16：严格区分路径大小写](./docs/课时-16.md)
+- [课时 17：加载资源 images、svg、media、fonts](./docs/课时-17.md)
 
 </details> 
 
@@ -98,6 +99,7 @@ webpack-box upgrade 5 # 可以切换到 webpack5/4
 - [html-webpack-plugin 生成html](./config/HtmlWebpackPlugin.js)
 - [mini-css-extract-plugin 配置](./config/MiniCssExtractPlugin.js)
 - [别名配置](./config/alias.js)
+- [加载资源 images、svg、media、fonts](./config/assets.js)
 - [babel-loader 配置](./config/babelLoader.js)
 - [基础配置](./config/base.js)
 - [cache-loader 配置（webpack 5 弃用）](./config/cacheLoader.js)
@@ -143,6 +145,7 @@ module.exports = function (config) {
    * @param {object} stylelint stylelint 配置
    * @param {object} eslint eslint 配置
    * @param {object} alias 配置别名
+   * @param {Boolean} filenameHashing 文件名是否使用 hash
    */
   return {
     entry: 'src/main.js',
@@ -156,6 +159,7 @@ module.exports = function (config) {
       '@': resolve('src'),
       '@src': resolve('src')
     },
+    filenameHashing: true,
     eslint: {
       lintOnSave: true, // 开启运行时检测
       extensions: ['js', 'jsx', 'vue'] // 默认 ['js', 'jsx']

box.config.js

@@ -17,6 +17,7 @@ module.exports = function (config) {
    * @param {object} stylelint stylelint 配置
    * @param {object} eslint eslint 配置
    * @param {object} alias 配置别名
+   * @param {Boolean} filenameHashing 文件名是否使用 hash
    */
   return {
     entry: 'src/main.js',
@@ -30,6 +31,7 @@ module.exports = function (config) {
       '@': resolve('src'),
       '@src': resolve('src')
     },
+    filenameHashing: true,
     eslint: {
       lintOnSave: true, // 开启运行时检测
       extensions: ['js', 'jsx', 'vue'] // 默认 ['js', 'jsx']

config/assets.js

@@ -0,0 +1,59 @@
+// [加载资源 images、svg、media、fonts]
+module.exports = ({ config, webpackVersion, resolve, options }) => {
+  return () => {
+    // const resolveLocal = require('../util/resolveLocal')
+    const getAssetPath = require('../util/getAssetPath')
+    const inlineLimit = 4096
+
+    const genAssetSubPath = dir => {
+      return getAssetPath(
+        options,
+        `${dir}/[name]${options.filenameHashing ? '.[hash:8]' : ''}.[ext]`
+      )
+    }
+
+    const genUrlLoaderOptions = dir => {
+      return {
+        limit: inlineLimit,
+        fallback: {
+          loader: 'file-loader',
+          options: {
+            name: genAssetSubPath(dir)
+          }
+        }
+      }
+    }
+
+    config.module
+      .rule('images')
+      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
+      .use('url-loader')
+      .loader(require.resolve('url-loader'))
+      .options(genUrlLoaderOptions('img'))
+
+    // do not base64-inline SVGs.
+    // https://github.com/facebookincubator/create-react-app/pull/1180
+    config.module
+      .rule('svg')
+      .test(/\.(svg)(\?.*)?$/)
+      .use('file-loader')
+      .loader(require.resolve('file-loader'))
+      .options({
+        name: genAssetSubPath('img')
+      })
+
+    config.module
+      .rule('media')
+      .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
+      .use('url-loader')
+      .loader(require.resolve('url-loader'))
+      .options(genUrlLoaderOptions('media'))
+
+    config.module
+      .rule('fonts')
+      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
+      .use('url-loader')
+      .loader(require.resolve('url-loader'))
+      .options(genUrlLoaderOptions('fonts'))
+  }
+}

docs/课时-17.md

@@ -0,0 +1,61 @@
+## 课时 17：加载资源 images、svg、media、fonts
+
+这章就直接上代码吧，是之前基础篇的补充
+
+```js
+module.exports = ({ config, webpackVersion, resolve, options }) => {
+  return () => {
+    const getAssetPath = require("../util/getAssetPath");
+    const inlineLimit = 4096;
+
+    const genAssetSubPath = dir => {
+      return getAssetPath(
+        options,
+        `${dir}/[name]${options.filenameHashing ? ".[hash:8]" : ""}.[ext]`
+      );
+    };
+
+    const genUrlLoaderOptions = dir => {
+      return {
+        limit: inlineLimit,
+        fallback: {
+          loader: "file-loader",
+          options: {
+            name: genAssetSubPath(dir)
+          }
+        }
+      };
+    };
+
+    config.module
+      .rule("images")
+      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
+      .use("url-loader")
+      .loader(require.resolve("url-loader"))
+      .options(genUrlLoaderOptions("img"));
+
+    config.module
+      .rule("svg")
+      .test(/\.(svg)(\?.*)?$/)
+      .use("file-loader")
+      .loader(require.resolve("file-loader"))
+      .options({
+        name: genAssetSubPath("img")
+      });
+
+    config.module
+      .rule("media")
+      .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
+      .use("url-loader")
+      .loader(require.resolve("url-loader"))
+      .options(genUrlLoaderOptions("media"));
+
+    config.module
+      .rule("fonts")
+      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
+      .use("url-loader")
+      .loader(require.resolve("url-loader"))
+      .options(genUrlLoaderOptions("fonts"));
+  };
+};
+```

package.json

@@ -60,6 +60,7 @@
     "eslint-plugin-vue": "^6.0.1",
     "express": "^4.17.1",
     "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^5.0.2",
     "fork-ts-checker-notifier-webpack-plugin": "^1.0.2",
     "fork-ts-checker-webpack-plugin": "^3.1.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
@@ -89,6 +90,7 @@
     "thread-loader": "^2.1.3",
     "tslint": "^5.20.1",
     "typescript": "^3.7.2",
+    "url-loader": "^3.0.0",
     "vue-cli-plugin-commitlint": "^1.0.10",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^5.0.0-beta.9",

src/main.js

@@ -12,11 +12,13 @@ require('./style/index.less')
 require('./style/index.scss')
 import('./style/index.postcss')
 require('react')
+const myPubPic = require('./assets/my-pub.jpeg')
 
 if (process.env.NODE_ENV === 'production') {
   console.log('Welcome to production')
 }
 console.log(cube(2))
+console.log(myPubPic)
 
 const h2 = document.createElement('h2')
 h2.className = 'test'

util/getAssetPath.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = function getAssetPath (options, filePath) {
+  return options.assetsDir
+    ? path.posix.join(options.assetsDir, filePath)
+    : filePath
+}

util/getPadLength.js

@@ -0,0 +1,9 @@
+module.exports = function getPadLength (obj) {
+  let longest = 10
+  for (const name in obj) {
+    if (name.length + 1 > longest) {
+      longest = name.length + 1
+    }
+  }
+  return longest
+}

util/isAbsoluteUrl.js

@@ -0,0 +1,4 @@
+module.exports = function isAbsoluteUrl (url) {
+  // A URL is considered absolute if it begins with "<scheme>://" or "//"
+  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
+}