这篇文章顺着上上篇文章开头的思路梳理关于webpack打包服务的细节。
对于前端打包总的来说就是拿到入口，分析入口文件里面的各种依赖，找到依赖，聚合依赖，输出一个文件。
webpack是一个打包工具，按照它规定的写法和配置能帮助我们实现上述功能。webpack的配置很多，但是我们常用的配置并不是很多，我们书写配置是为了告诉webpack在打包的每一个环节中应该如何去执行（比如查找文件的过程、插件运行的顺序）。
后面会花一篇文章梳理下关于webpack配置相关的东西，在本篇文章中只对打包服务进行讲述。
因为我对webpack的认识和了解还不够透彻，所以如果有错误的地方希望能通过右下角的联系方式告诉我，以便于一起相互学习和提高。
以下开启打包服务的代码：
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
let fs = require('fs'),
path = require('path'),
webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server'),
config = require('./webpackConfig'),
definePluginConfig = require('./definePlugin'),
entryProperties = require('./entryRule');
let httpsConfig = process.env.PROTOCOL_ENV === 'https' && {
headers: {
'X-Custom-Header': 'yes',
'Access-Control-Allow-Origin': '*'
},
https: {
cert: fs.readFileSync(path.join(__dirname, './cert.pem')),
key: fs.readFileSync(path.join(__dirname, './key.pem'))
}
} || {};
if (process.env.ENTRY_TYPE === 'h5') {
new WebpackDevServer(
webpack(Object.assign(
{},
config,
{
output: Object.assign({}, config.output, entryProperties.output),
entry: entryProperties.entry,
resolve: entryProperties.resolve,
module: entryProperties.moduleLoader,
plugins: [
new webpack.DefinePlugin(definePluginConfig)
]
}
)),
Object.assign(
{},
{
stats: {
chunks: false,
colors: true
},
inline: true,
publicPath: '/js/h5',
disableHostCheck: true,
},
httpsConfig
)
).listen(3002);
} else {
new WebpackDevServer(
webpack(Object.assign(
{},
config,
{
output: Object.assign({}, config.output, entryProperties.output),
entry: entryProperties.entry,
resolve: entryProperties.resolve,
module: entryProperties.moduleLoader,
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin(definePluginConfig)
]
}
)
),
Object.assign(
{},
{
stats: {
chunks: false,
colors: false
},
inline: true,
publicPath: '/js/pc',
disableHostCheck: true
},
httpsConfig
)
).listen(9090);
}
