五、webpack项目打包发布（配置、整理dist目录下的文件）

为什么要打包发布（生产环境打包）？

• 开发环境下，打包生成的文件存放于内存中，无法获取到
• 开发环境下，打包生成的文件不会进行代码压缩、性能优化

配置：

package.json 中新增build命令：

"scripts":{
	"dev":"webpack serve",//开发环境下，运行npm run dev
	"build":"webpack --mode production",// 项目发布时，运行npm run build 得到dist文件夹，此处的production生产模式会覆盖webpack.config.js中的mode值！！！！
}

整理dist目录下的文件：

• 把js文件统一生成到dist>js目录下
• 把图片文件统一生成到dist>image目录下

//webpack.config.js
module.exports = {
	mode:'development',//build之前不需要特意改成production，因为在package.json中npm run build命令也声明了mode为生产模式，那个优先级高，这个mode会被覆盖
	...,
	output:{
		path:path.join(__dirname,'dist'),
		//明确指定打包生成的bundle.js文件存放到dist>js文件夹中
		filename:'js/bundle.js'
	},
	module:{
		rules:[
			test:/\.png|jpg|gif$/,
			use:'url-loader',
			options:{
				limit:22229,
				//明确指定打包生成的图片文件，存放在dist>image文件夹中
				outputPath:'image',
			}
		]
	}
}