生产模式介绍

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

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

优化代码运行性能

优化代码打包速度

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, //是否自动开启浏览器
}
};

(3) 启动dev

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', //生产模式
};

(5) 启动prod

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