# 三.内联 webpack 插件

# 安装

package.json

{
  "name": "2.plugin",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.5.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "html-webpack-plugin": "^4.0.0-beta.5"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 文件

plugins/InlineSourcePlugin.js

//把外链的标签 变成内联的标签
const HtmlWebpackPlugin = require("html-webpack-plugin")

class InlineSourcePlugin {
  constructor(match) {
    this.reg = match.match
  }
  processTag(tag, compilation) {
    // console.log(tag);
    let newTag, url
    if (tag.tagName === "link" && this.reg.test(tag.attributes.href)) {
      newTag = {
        tagName: "style",
        attributes: { type: "text/css" },
      }
      url = tag.attributes.href
    }
    if (tag.tagName === "script" && this.reg.test(tag.attributes.src)) {
      newTag = {
        tagName: "script",
        attributes: { type: "application/javascript" },
      }
      url = tag.attributes.src
    }
    if (url) {
      newTag.innerHTML = compilation.assets[url].source() //文件的内容放到innerHTML属性上
      delete compilation.assets[url]
      return newTag
    }
    return tag
  }
  processTags(data, compilation) {
    let headTags = []
    let bodyTags = []
    data.headTags.forEach((headTag) => {
      headTags.push(this.processTag(headTag, compilation))
    })
    data.bodyTags.forEach((bodyTag) => {
      bodyTags.push(this.processTag(bodyTag, compilation))
    })
    return { ...data, headTags, bodyTags }
  }
  apply(compiler) {
    //要通过webpackPlugin来实现这个功能
    compiler.hooks.compilation.tap("InlineSourcePlugin", (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
        "alterPlugin",
        (data, cb) => {
          //   console.log(data)
          data = this.processTags(data, compilation)
          cb(null, data)
        }
      )
    })
  }
}
module.exports = InlineSourcePlugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

src/index.css

body {
  background: red;
}

1
2
3

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>

1
2
3
4
5
6
7
8
9
10

src/index.js

import "./index.css"
console.log(1111111111)

1
2

# 配置

webpack.config.js

let path = require("path")
let HtmlWebpackPlugin = require("html-webpack-plugin")
let FileListPlugin = require("./plugins/FileListPlugin")
let MiniCssExtractPlugin = require("mini-css-extract-plugin")
let InlineSourcePlugin = require("./plugins/InlineSourcePlugin")
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css",
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new FileListPlugin({
      filename: "list.md",
    }),
    new InlineSourcePlugin({
      match: /\.js|.css/,
    }),
  ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 打包

npx webpack

打开包后的 index.html 里面包含 js 和 css

完整代码 (opens new window)

← 二.文件列表插件四.自动发布到七牛云上 →