Webpack5开发和生产模式

一、简介

前面介绍过，在webpack.config.js的mode配置中有development和production两个选项，那有什么区别呢？本篇文章就简单介绍下。

二、开发模式

2.1 简介

开发模式(mode: development)顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

编译代码，使浏览器能识别运行
- 开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源
代码质量检查，树立代码规范
- 提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观

三、生产模式

3.1 简介

生产模式(mode: production)是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

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

优化代码运行性能
优化代码打包速度

3.2 生产模式搭建

3.2.1 文件目录

在项目根目录下创建config文件夹，用来存在不同模式的配置，项目目录如下：

├── webpack5demo (项目根目录)├── 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 (包的依赖管理配置文件)

3.2.2 修改webpack.dev.js

因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件

const path = require('path') // nodejs核心模块，用来处理路径问题
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 入口entry: './src/main.js',// 输出output: {// 文件输出路径// __dirname nodejs变量，代表当前文件的文件夹目录path: path.resolve(__dirname, 'dist'),// 入口文件打包输出文件名filename: 'static/js/main.js',// clean: true, // 开发模式没有输出，不需要清空输出结果},// 加载器module: {rules: [{// 匹配css结尾文件test: /\.css$/,// loader执行顺序是从右到左use: ['style-loader', 'css-loader']},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {// 小于10kb的图片转base64// 优点：减少请求数量  缺点：体积会增大三分之一dataUrlCondition: {maxSize: 20 * 1024 // 20kb}},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",}},{/*** 处理图标字体、媒体等资源* type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式*/test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {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'),inject: 'head'})],//开发服务器devServer: {host: '127.0.0.1', // 域名port: '3000', // 端口open: true // 是否自动打开浏览器},// 模式mode: 'development'
}

运行开发模式的指令：

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

3.2.3 修改webpack.prod.js

const path = require('path') // nodejs核心模块，用来处理路径问题
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 入口entry: './src/main.js',// 输出output: {// 文件输出路径// __dirname nodejs变量，代表当前文件的文件夹目录path: path.resolve(__dirname, '../dist'),// 入口文件打包输出文件名filename: 'static/js/main.js',clean: true, // 自动将上次打包目录资源清空},// 加载器module: {rules: [{// 匹配css结尾文件test: /\.css$/,// loader执行顺序是从右到左use: ['style-loader', 'css-loader']},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {// 小于10kb的图片转base64// 优点：减少请求数量  缺点：体积会增大三分之一dataUrlCondition: {maxSize: 20 * 1024 // 20kb}},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",}},{/*** 处理图标字体、媒体等资源* type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式*/test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {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'),inject: 'head'})],//开发服务器devServer: {host: '127.0.0.1', // 域名port: '3000', // 端口open: true // 是否自动打开浏览器},// 模式mode: 'production'
}

运行生产模式的指令：

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

3.3 配置运行指令

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

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

以后启动指令：

开发模式：npm start 或 npm run dev
生产模式：npm run build

Webpack5开发和生产模式相关推荐

说说对npm的开发模式和生产模式的理解
2019独角兽企业重金招聘Python工程师标准>>> nodejs这些年的发展非常快,相信没有哪个前端不知道的了,npm也成为了前端开发中经常用到了的一个命令.那么npm不是只用一 ...
weblogic-开发模式转变为生产模式生产模式转变为开发模式
在实际生产环境中,我们部署weblogic,一般都是配置成生产模式,理由是便于我们后期的管理,只有在我们的人为控制下,才能执行发布项目等操作.而weblogic的开发模式,类似tomcat的自动发布, ...
webpack4.x实战七，生产模式和开发模式分开打包
生产模式中,要求css和js文件尽可能小,因此需要把css和js文件压缩:开发模式中,要便于代码的调试,不能压缩css和js文件. 使用webpack-merge 安装插件webpack-merge ...
tomcat的开发模式和生产模式
tomcat这两种模式对大家的影响主要是在jsp的开发当中.大家都知道jsp需要先编译成servlet源文件并编译为字节码,即生成.class文件才可以执行,所以在jsp文件首次运行时先要进行编译导致 ...
Weblogic学习（一）开发模式与生产模式
近段时间老大让我在Linux上安装weblogic,费了老大劲的我搜集各类资料,终于把weblogic安装好了.(具体如何安装我晚些时候会写一篇详细的博客)在搜集资料的时候,了解到weblogic的域 ...
Elasticsearch 中的“生产模式”和“开发模式”是什么
1.开发模式开发模式是默认配置(未配置集群发现设置),如果用户只是出于学习目的,而引导检查会把很多用户挡在门外,所以ES提供了一个设置项discovery.type=single-node.此项配置 ...
npm开发模式和生产模式
说说对npm的开发模式和生产模式的理解大前端 nodejs这些年的发展非常快,相信没有哪个前端不知道的了,npm也成为了前端开发中经常用到了的一个命令.那么npm不是只用一个 "npm i ...
带你了解『百度智能云发布云智一体的AI开发全栈模式』
在"云智一体"的独家优势下,百度智能云为企业的 AI 开发打开了更多可能. 3月27日,百度智能云2021云智技术论坛首场活动在京举行,重磅发布"云智一体的 AI 开发全 ...
vue中生产模式和调试模式_为什么在生产中进行调试是如此诱人？
vue中生产模式和调试模式生产调试为什么在生产中进行调试是如此诱人? 在我的第一份工作中,我要做的任务之一是修复一个错误,该错误过去在非常复杂的生产系统中有时会发生. 那很简单! - 我想. 我将 ...