Webpack学习笔记

# 四.banner

# 安装

package.json

{
  "name": "3.babel-loader",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "loader-utils": "^1.2.3",
    "schema-utils": "^1.0.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 文件

banner.js

zbc122
1

loaders/banner-loader.js

let loaderUtils = require("loader-utils")
let validateOptions = require("schema-utils")
let fs = require("fs")
function loader(source) {
  this.cacheable(source)
  this.cacheable && this.cacheable(+79)
  let options = loaderUtils.getOptions(this)
  let cb = this.async()
  let schema = {
    type: "object",
    properties: {
      text: {
        type: "string",
      },
      filename: {
        type: "string",
      },
    },
  }
  validateOptions(schema, options, "banner-loader")
  if (options.filename) {
    this.addDependency(options.filename)
    fs.readFile(options.filename, "utf8", function(err, data) {
      cb(err, `/**${data}**/${source}`)
    })
  } else {
    cb(null, `/**${options.text}**/${source}`)
  }
  return source
}
module.exports = loader
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

# 配置

webpack.config.js

let path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist")
  },
  resolveLoader: {
    modules: ["node_modules", path.resolve(__dirname, "loaders")]

  },
  watch:true,
  devtool:'source-map',
  module: {
    rules: [
      {
        test:/\.js$/,
        use:{
          loader:'banner-loader',
          options:{
            text:'123',
            filename:path.resolve(__dirname,'banner.js')
          }
        }
      }
    ]
  }
};
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

# 打包

npx webpack
1

完整代码 (opens new window)

← 五.file-url →