webpack4配置详解|博客系列 | 前端进阶之旅

# 一、entry

//方式一：单文件写法
entry: {
	index: './src/pages/route.js',
	//about: './src/pages/about.js',
	//other:()=>{...}
}

//方式二：多文件写法
entry: {
	/*index:[
		'webpack-hot-middleware/client',
		'./src/root.js'
	],*/
	index: ['./src/root.js'],
	vendors : ['react','react-dom','redux','react-router','classnames'],
}

@前端进阶之旅: 代码已经复制到剪贴板

# 二、output

path: 输出文件的目录，
filename:输出的文件名，它一般跟你entry配置相对应，如：js/[name].js name在这里表示的是[index、vendors]，
chunkFilename：块，配置了它，非入口entry的模块，会帮自动拆分文件，也就是大家常说的按需加载，与路由中的 require.ensure相互应
publicPath：文件输出的公共路径，
pathinfo：即保留相互依赖的包中的注释信息，这个基本不用主动设置它，它默认 - development 模式时的默认值是 true，而在 production 模式时的默认值是 false，
主要的就是这些，还有一些其他的library、libraryTarget、auxiliaryComment等

output: {
	path: path.resolve(__dirname, '../assets'),
	filename: 'js/[name].js',
	chunkFilename: 'js/[name].[chunkhash:8].js',
	publicPath: '/_static_/', //最终访问的路径就是：localhost:3000/_static_/js/*.js
	//pathinfo:true,
}

@前端进阶之旅: 代码已经复制到剪贴板

# 三、hash

常用的有三种

模板	描述
`hash`	模块标识符的`hash`,一般应用于`filename：'[name].[hash].js'`
`chunkhash`	按需加载块内容的`hash`，根据chunk自身的内容计算而来,`'js/[name].[chunkhash:8].js'`
`contenthash`	这个没有用过，看了下文档它是在提取`css`文件时根据内容计算而来的 `hash` ，结合`ExtractTextWebpackPlugin`插件使用
`hash`长度	默认`20`，可自定:`[hash:8]`、`[chunkhash:16]`

# 四、mode

这个属于webpack4才新增的，4之前大家一般用DefinePlugin插件设置
mode：development``，production，none`，
development : 开发模式，打包的代码不会被压缩，开启代码调试，
production : 生产模式，则正好反之。


//方法一
webpack --mode development/production

//方法二
……
mode: