# mode

类型: String

默认值: "none"

功能: 设置用到的模式

其它模式:

• development 开发模式(本地开发)
• production 生成模式(发布到线上环境)

在webpack4中, 如果将mode设置成production就会启用webpack内部的uglifyjs插件, 进入压缩输出.此时的bundle是经过了tree shaking和代码压缩的.

# 输出(output)

# publicPath

类型: String | Function

默认值: 空字符串""

功能: 指定输出目录对应的公开URL, 影响的主要是外部资源的引用和webpack-dev-server的publicPath

官网地址: output.publicPath

案例一🌰:

例如我们使用webpack打包生成的dist文件目录为:

/dist
	|- bundle.js
	|- index.html
	|- icon.png

默认对于资源的引用, 比如icon.png的引用是这样的:

.box {
	background: url('icon.png') 
}

如果设置了output.publicPath之后:

webpack.config.js

...
module.exports = {
	output: {
		...
		publicPath: '/assets/'
	}
}

浏览器就会在资源文件的引用加上一个前缀, 变成:

.box {
	background: url('/assets/icon.png') 
}

此时, 图片就会加载失败, 因为dist文件夹下并没有assets这个文件夹.

案例二🌰:

影响了webpack-dev-server