生产模式介绍

生产模式是开发完成代码后，需要得到代码将来部署上线；这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

优化代码运行性能

优化代码打包速度

1. 生产模式准备

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

(1) 文件目录(2) 修改 webpack.dev.js

const path = require('path')const ESLintWebpackPlugin = require('eslint-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {//入口：相对路径和绝对路径都行entry: './src/main.js',//输出output: {path: undefined, // 开发模式没有输出，不需要指定输出目录filename: 'static/js/main.js',// clean:true, // 开发模式没有输出，不需要清空输出结果},//加载器module: {rules: [{//用来配置.css结尾的文件test: /\.css$/,//use数组里面Loader执行顺序是从右到左use:['style-loader', 'css-loader']},{//用来配置.less结尾的文件test:/\.less$/,use:['style-loader', 'css-loader', 'less-loader']},{//用来配置.sass或者.scss结尾的文件test:/\.s[ac]ss$/,use:['style-loader', 'css-loader', 'sass-loader']},{//用来配置.styl结尾的文件test:/\.styl$/,use:['style-loader', 'css-loader', 'stylus-loader']},{//用来配置图片文件test:/\.(png|jpe?g|gif|webp)$/,type:'asset',parser:{dataUrlCondition:{maxSize:50*1024 // 小于50kb的图片会被base64处理}},generator:{/*** 将图片文件输出到 static/imgs 目录中* 将图片文件命名 [hash:8][ext][query]* [hash:8]: hash值取8位* [ext]: 使用之前的文件扩展名* [query]: 添加之前的query参数*/filename: 'static/imgs/[hash:8][ext][query]'}},{//用来配置字体图标文件test:/\.(ttf|woff2?|map4|map3|avi)$/,type:'asset/resource',generator:{/*** 将文件输出到 static/media 目录中* 将图片文件命名 [hash:8][ext][query]* [hash:8]: hash值取8位* [ext]: 使用之前的文件扩展名* [query]: 添加之前的query参数*/filename: 'static/media/[hash:8][ext][query]'},},{test:/\.js$/,exclude:/node_modules/, // 排除node_modules代码不编译loader:'babel-loader'},]},//插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname,'../src')}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname,'../public/index.html')})],//模式mode:'development', //开发模式//开发服务器devServer:{host:'localhost', // 服务器地址port: '3000', //端口open: true, //是否自动开启浏览器}};

npx webpack serve --config ./config/webpack.dev.js

(4) 修改 webpack.prod.js

const path = require('path')const ESLintWebpackPlugin = require('eslint-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {//入口：相对路径和绝对路径都行entry: './src/main.js',//输出output: {path: path.resolve(__dirname, '../dist'), // 生产模式需要输出filename: 'static/js/main.js',clean:true,},//加载器module: {rules: [{//用来配置.css结尾的文件test: /\.css$/,//use数组里面Loader执行顺序是从右到左use:['style-loader', 'css-loader']},{//用来配置.less结尾的文件test:/\.less$/,use:['style-loader', 'css-loader', 'less-loader']},{//用来配置.sass或者.scss结尾的文件test:/\.s[ac]ss$/,use:['style-loader', 'css-loader', 'sass-loader']},{//用来配置.styl结尾的文件test:/\.styl$/,use:['style-loader', 'css-loader', 'stylus-loader']},{//用来配置图片文件test:/\.(png|jpe?g|gif|webp)$/,type:'asset',parser:{dataUrlCondition:{maxSize:50*1024 // 小于50kb的图片会被base64处理}},generator:{/*** 将图片文件输出到 static/imgs 目录中* 将图片文件命名 [hash:8][ext][query]* [hash:8]: hash值取8位* [ext]: 使用之前的文件扩展名* [query]: 添加之前的query参数*/filename: 'static/imgs/[hash:8][ext][query]'}},{//用来配置字体图标文件test:/\.(ttf|woff2?|map4|map3|avi)$/,type:'asset/resource',generator:{/*** 将文件输出到 static/media 目录中* 将图片文件命名 [hash:8][ext][query]* [hash:8]: hash值取8位* [ext]: 使用之前的文件扩展名* [query]: 添加之前的query参数*/filename: 'static/media/[hash:8][ext][query]'},},{test:/\.js$/,exclude:/node_modules/, // 排除node_modules代码不编译loader:'babel-loader'},]},//插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname,'../src')}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname,'../public/index.html')})],//模式mode:'production', //生产模式};

npx webpack --config ./config/webpack.prod.js

2. 配置运行指令

为了方便运行不同模式的指令，可以将指令定义在 package.json 中 scripts 里面

{"name": "webpack_code","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "npm run dev","dev": "npx webpack serve --config ./config/webpack.dev.js","build": "npx webpack --config ./config/webpack.prod.js"},"keywords": [],......

启动指令：

开发模式：npm start 或 npm run dev

生产模式：npm run build