Webpack生产模式介绍

生产模式介绍

生产模式是开发完成代码后，我们需要得到代码来部署上线。
这个模式下我们主要对代码进行优化，让其运行性能更好。
优化主要从两个角度出发：
1、优化代码运行性能
2、优化代码打包速度

生产模式准备

我们分别准备两个配置文件来放不同的配置

1、文件目录

｜-webpack-test（项目根目录）
	｜-config（webpack配置文件目录）
		｜-webpack.dev.js（开发模式配置文件）
		｜-webpack.prod.js（生产模式配置文件）
	｜-node_modules（下载包存放目录）
	｜-src（项目源码目录，除了html其他都在src里面）
		｜-略
	｜-public（项目html文件）
		｜-index.html
	｜-.eslintrc.js（Eslint配置文件）
	｜-babel.config.js（babel配置文件）
	｜-package.json（包的依赖管理配置文件）

2、修改webpack.dev.js

1. output->path->undefined
2. 绝对路径回退一个文件夹
3. 运行方式：npx webpack serve --config ./config/webpack.dev.js

module.exports = {
	// 入口
	entry: "./src/main.js"， //相对路径，其实文件执行是在项目的根目录执行，并不是在config里面的
	// 输出
	output: {
		// 所有文件的输出路径
		// 开发模式没有输出
		path: undefined,
		filename: "static/js/main.js"
	},
	// 插件
	plugins: [
		// plugin的配置
		new ESLintPlugin({
			// 检测哪些文件
			context: path.resolve(__dirname, "../src")
		}),
		new HtmlWebpackPlugin({
			// 模板：以public/index.html文件创建新的html文件
			// 新的html文件特点： 1、结构和原来一致 2、自动引入打包输出的资源
			template: path.resolve(__dirname, "../public/index.html")
		})
	]
}

3、修改webpack.prod.js

1. 绝对路径回退一个文件夹
2. mode: production
3. 生产模式可以取消devServer
4. 运行方式：npx webpack serve --config ./config/webpack.prod.js

module.exports = {
	// 入口
	entry: "./src/main.js",
	// 输出
	output: {
		path: path.resolve(__dirname, "../dist"),
		filename: "static/js/main.js",
		clean: true
	},
	// 插件
	plugins: [
		new ESLintPlugin({
			context: path.resolve(__dirname, "../src")
		}),
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, "../public/index.html")
		})
	],
	// 模式
	mode: "production"
}

4、修改package.json

@package.json

"scripts": {
	"start": "npm run dev",
	"dev": "webpack serve --config ./config/webpack.dev.js",
	"build": "webpack --config ./config/webpack.prod.js"
}