# 四.happypack
# 1.安装
package.json
{
"name": "4.happypack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack",
"build:api": "webpack --config webpack.config.react.js"
},
"keywords": [],
"author": "",
"description": "",
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"happypack": "^5.0.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.24.0",
"react": "^16.8.5",
"react-dom": "^16.8.5"
}
}
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
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
# 2.文件
参照上列
# 3.配置
webpack.config.js
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let webpack = require("webpack");
let Happypack = require("happypack");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
devServer: {
port: 3000,
open: true,
contentBase: "./dist"
},
plugins: [
new Happypack({
id:'css',
use:['style-loader','css-loader']
})
new Happypack({
id:'js',
use:[{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
})
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, "dist", "manifest.json")
}),
new webpack.IgnorePlugin(/\.\/locale/, /moment/),
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
module: {
noParse: /jquery/, //不去解析jquery中的依赖库
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve("src"),
use: "Happypack/loader?id=js"
},
{
test:/\.css$/,
use:'Happypack/loader?id=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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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
# 4.运行
npm run build
1
当项目比较大的时候开启多线程打包会明显提高效率