# 二.deploy
# 安装
package.json
{
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}
1
2
3
4
5
6
2
3
4
5
6
# 文件
# loaders
loaders/inline-loader.js
function loader(source) {
console.log("inline-loader")
return source
}
module.exports = loader
1
2
3
4
5
2
3
4
5
loaders/loader1.js
function loader(source) {
console.log("loader1")
return source
}
loader.pitch = function() {
console.log("loader-pitch1")
return "ss"
}
module.exports = loader
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
loaders/loader2.js
function loader(source) {
console.log("loader2")
return source
}
loader.pitch = function() {
console.log("loader-pitch2")
}
module.exports = loader
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
loaders/loader3.js
function loader(source) {
console.log("loader3")
return source
}
loader.pitch = function() {
console.log("loader-pitch3")
}
module.exports = loader
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# src
src/a.js
module.exports = "12121"
1
src/index.js
console.log("loader")
//-!不会让文件 再去通过pre+normal loader来处理了
//！没有normal
//!!什么都不要
let str = require("!!inline-loader!./a.js")
//loader 默认是由两部分组成 pitch normal
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 配置
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")],
// //别名
// alias: {
// loader1: path.resolve(__dirname, "loaders", "loader1.js")
// }
},
module: {
rules: [
//loader的顺序问题，从右向左，从下向上
//loader的分类 pre在前面的 post 在后面的 normal
//loader的顺序 pre+normal+inline+post
{
test: /\.js$/,
use: {
loader: "loader3",
},
enforce: "pre",
},
{
test: /\.js$/,
use: {
loader: "loader2",
},
enforce: "post",
},
{
test: /\.js$/,
use: {
loader: "loader1",
},
},
// {
// test: /\.js$/,
// use: ["loader3", "loader2", "loader1"]
// }
],
},
}
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
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
# 打包
npx webpack
1