webpack开发环境和生产环境打包

// 开发环境webpack.config.js基础的配置

const path = require('path')
// 首先要安装该插件 npm i html-webpack-plugin -D
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	mode:'development',
	// 单文件入口
	entry:'./src/index.js'
	// 多文件入口，根据实际需求是单入口还是多入口
	entry:{
		index1:'./src/index1.js',
		index2:'./src/index2.js'
	},
	// 单出口
	output:{
		path:path.join(__dirname,'dist'),
		filename:'bundle.js'
	},
	// 多出口
	output:{
		path:path.join(__dirname,'dist'),
		filename:"[name].js"
	},
	// 启动本地服务器,首先要下载: npm i webpack-dev-server -D
	devServer:{
		host:'localhost',	// 主机名
		port:8001,		// 端口号
		open:true		// 启动服务后是否主动打开网页
	}
	plugins:[
		new HtmlWebpackPlugin({
			template:path.join(__dirname,'src','index.html'),	// 模板文件路径
			filename:'index.html',	// 打包之后的文件名
			minify:{
				minimize:true	//打包为最小值
				minifycss:true	// 压缩html模板中的css样式
				...
			}
		})
	],
	module:{
		// 定义规则
		rules:[
				// 定义babel转义规则
				{
					test:/\.js$/,	// 以.js结尾的文件都通过babel转义
					loader:['babel-loader'],	// 使用的插件
					include:path.join(__dirname,'src'),	// 包括src中的.js结尾的文件
					exclude:/node_modules/	// 不包括node_modules中的js文件
				}
				// 以 .css结尾的文件使用style-loader，css-loader插件打包
				// 要 npm i style-loader css-loader -D 安装插件打包css文件
				{
					test:/\.css$/,
					use:[
							{
								loader:'style-loader',
							}，
							{
								loader:'css-loader'
							},
							// 给不同浏览器添加对应内核的前缀, npm i postcss-loader autoprefixer  安装postcss-loader 和autoprefixer
							{
								loader:'postcss-loader',
								options:[
									plugins[require('autoprefixer')({
										browsers:[
											'ie >= 8',
											'firfox >= 20',
											'safari >= 5',
											'android >=4',
											'Ios >=6',
											'last 4 version'
										]
									})]
								]
							}
						]
				},
			]
	}
}

以上为其中一部分,
注意：module中的rules的babel转义部分，需要有几个步骤：
1、npm i babel-loader @babel/core @babel/preset-env -D 安装这3个插件
2、根目录下新建.babelrc文件

{
	"presets":["@babel/preset-env"]
}

生产环境，根目录新建一个webpack.prod.js，把生产环境的webpack.config.js中的内容复制过来，在此基础上修改
修改：
1、mode:‘production’
2、输入文件名:

output:{
		path:path.join(__dirname,'dist'),
		// 相当与在输出文件名拼接一个hash计算值，如果代码变了文件名就改变，如果代码没改变，文件名就不改变
		filename:'bundle.[contenthash].js'	
	},

3、生产环境不需要devServer本地服务器，移除掉
4、根目录下的package.json修改build命令

webpack.prod.js总览:

const path = require('path')
// 首先要安装该插件 npm i html-webpack-plugin -D
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	mode:'production',
	// 单文件入口
	entry:'./src/index.js'
	// 多文件入口，根据实际需求是单入口还是多入口
	entry:{
		index1:'./src/index1.js',
		index2:'./src/index2.js'
	},
	// 单出口
	output:{
		path:path.join(__dirname,'dist'),
		filename:'bundle.js'
	},
	// 多出口
	output:{
		path:path.join(__dirname,'dist'),
		filename:"[name].[contenthash].js"
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:path.join(__dirname,'src','index.html'),	// 模板文件路径
			filename:'index.html',	// 打包之后的文件名
			minify:{
				minimize:true	//打包为最小值
				minifycss:true	// 压缩html模板中的css样式
				...
			}
		})
	],
	module:{
		// 定义规则
		rules:[
				// 定义babel转义规则
				{
					test:/\.js$/,	// 以.js结尾的文件都通过babel转义
					loader:['babel-loader'],	// 使用的插件
					include:path.join(__dirname,'src'),	// 包括src中的.js结尾的文件
					exclude:/node_modules/	// 不包括node_modules中的js文件
				}
				// 以 .css结尾的文件使用style-loader，css-loader插件打包
				// 要 npm i style-loader css-loader -D 安装插件打包css文件
				{
					test:/\.css$/,
					use:[
							{
								loader:'style-loader',
							}，
							{
								loader:'css-loader'
							},
							// 给不同浏览器添加对应内核的前缀, npm i postcss-loader autoprefixer  安装postcss-loader 和autoprefixer
							{
								loader:'postcss-loader',
								options:[
									plugins[require('autoprefixer')({
										browsers:[
											'ie >= 8',
											'firfox >= 20',
											'safari >= 5',
											'android >=4',
											'Ios >=6',
											'last 4 version'
										]
									})]
								]
							}
						]
				},
			]
	}
}

还有关于上线公共路径的配置，后续补上