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
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/*
	entry: 指定构建的入口起点
		1. string
			指定一个文件作为入口起点，打包形成一个chunk，输出一个bundle文件
			此时，chunk的名称默认是main·
			举例：
				entry: './src/index.js'
		2. array
			指定多个文件作为入口起点，所有入口文件最终只会形成一个chunk，输出一个bundle文件
			只用于在HMR功能中让模块热替换生效
			举例：
				entry: ['./src/index.js', './src/index.html']
		3. object
			有几个键值对就形成几个chunk，输出几个bundle文件，此时chunk的名称就是对应的key名称
			举例：
				entry: ｛
					indexjs: './src/index.js',
					indexhtml: './src/index.html'
				｝
			键值对可以是数组，数组内的所有文件形成一个chunk，输出一个bundle
			举例：
				entry: ｛
					jquery: './src/jquery.js',
					vue: ['./src/vue.js', './src/vue-router.js, ./src/axios.js']
				｝
*/
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build')
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: 'development'
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		// 文件名称（目录+文件名）
		// filename: '[name].js', [name]表示chunk的名称
		filename: 'built.js',
		// 输出文件目录（将来所有资源输出的公共目录）
		path: resolve(__dirname, 'build'),
		// 所有资源引入公共路径的前缀，设置后src="imgs/a.jpg"就变成src="/imgs/a.jpg"
		// 一般用于生产环境
		publicPath: '/',
		chunkFilename: '[name]_chunk.js', // 非入口chunk的文件名称
		library: '[name]' , // 整个库向外暴露的变量名
		libraryTarget: 'window' , // 变量名添加到浏览器端 
		// libraryTarget: 'global' , // 变量名添加到nodejs服务器端 
		// libraryTarget: 'commonjs' , // 变量名添加到commonjs 
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: 'development'
};

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
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build'),
	},
	module：{
		rules: [
			// loader的配置
			{
				// 使用正则表达式匹配要处理的文件
				test: /.css$/,
				// 多个loader用use
				use: ['style-loader', 'css-loader']
			},
			{
				test: /.js$/,
				// 排除node_modules下的js文件
				exclude: /node_modules/,
				// 优先执行
				enforce: 'pre',
				// 延后执行
				// enforce: 'post',
				// 只检查src下的js文件
				include: reslove(__dirname, 'src'),
				// 单个loader用loader
				loader: 'eslint-loader',
				// 指定一些配置选项
				options: {}
			},
			{
				// 以下配置只会生效一个
				oneOf: []
			}
		]
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: 'development'
};

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
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build'),
	},
	module：{
		rules: [
			{
				test: /.css$/,
				use: ['style-loader', 'css-loader']
			}
		]
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: 'development',
	// 解析模块的规则
	resolve: {
		// 配置解析模块路径别名，优点是可以简写路径，缺点是失去了代码提示
		alias: {
			// 在js文件中引用时，
			// import './src/css/index.css';
			// 可以写成
			// import '$css/index.css';
			$css: resolve(__dirname, 'src/css')
		},
		// 配置省略文件路径的后缀名，优点是可以简写文件名，缺点是同一目录下不同类型的文件也不能重名
		// import '$css/index.css';
		// 可以写成
		// import '$css/index';
		extensions: ['.js', '.json', '.css'],
		// 告诉webpack解析模块时去找哪些目录
		modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
	}
};

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
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build'),
	},
	module：{
		rules: [
			{
				test: /.css$/,
				use: ['style-loader', 'css-loader']
			}
		]
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: 'development',
	devServer: {
		// 运行代码的目录
		contentBase: resolve(__dirname, 'build'),
		// 监视contentBase目录下的所有文件，一旦文件变化就会reload
		watchContentBase: true,
		watchOptions: {
			// 忽略文件
			ignored: /node_modules/
		},
		// 启动gzip压缩
		compress: true,
		// 端口号
		port: 5000,
		// 主机名
		host: 'localhost',
		// 自动打开浏览器
		open: true,
		// 开启HMR功能
		hot: true,
		// 启动服务器时不显示日志信息
		clientLogLevel: 'none',
		// 静默启动：除了一些基本的启动信息外，其他内容都不显示
		quiet: true,
		// 出现错误不全屏提示
		overlay: false,
		// 服务器代理，解决开发环境下的跨域问题
		proxy: {
			'/api': {
				// 一旦devServer(5000)服务器接收到以/api开头的请求，就会把请求转发到另外一个服务器(3000)
				traget: 'http://localhost:3000',
				// 发送请求时，将/api/xxx重写为/xxx
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	}
};

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
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build'),
	},
	module：{
		rules: [
			{
				test: /.css$/,
				use: ['style-loader', 'css-loader']
			}
		]
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: 'development',
	optimization: {
		splitChunks: {
			chunks: 'all',
			// 代表分割的chunk最小为30kb
			minSize: 30 * 1024,
			// 最大没有限制
			maxSize: 0,
			// 要提取的chunk最少被引用1次
			minChunks: 1,
			// 按需加载时并行加载的文件的最大数量为5
			maxAsyncRequests: 5,
			// 入口js文件最大并行请求数量
			maxInitialRequests: 3,
			// 名称连接符
			automaticNameDelimiter: '~',
			// 可以使用命名规则
			name: true,
			// 分割chunk的组
			cacheGroups: {
				// node_modules文件会被打包到vendors组的chunk中
				// 命名规则： vendors~xxx.js
				// 满足上面的公共规则：如不小于30kb，至少被引用一次
				vendors: {
					test: /[\/]node_modules[\/]/,
					// 打包的优先级
					priority: -10
				},
				default: {
					// 可以覆盖公共规则
					// 要提取的chunk最少被引用2次
					minChunks: 2,
					// 优先级
					priority: -20,
					// 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
					reuseExistingChunk: true
				}
			}

		},
		// 将当前模块记录其他模块的hash值单独打包为一个文件runtime
		// 解决了修改a文件导致b文件的contenthash值变化
		runtimeChunk: {
			name: entrypoint => `runtime-${entrypoint.name}`
		},
		minimizer: {
			// 配置生产环境的压缩方案：js和css
			new TerserWebpackPlugin({
				// 开启缓存
				cache: true,
				// 开启多进程打包
				parallel: true,
				// 启用source-map
				sourceMap: true
			})
		}
	}
};