webpack5开发环境、生产环境配置 (三)

embedded/2024/12/5 2:46:52/

开发环境:就是我们开发代码时使用的模式。

这个模式我们做两件事情:
1、编译代码,使浏览器能识别运行
2、代码质量检查,树立代码规范

生产环境:开发完成代码后,我们需要得到代码将来部署上线。

这个模式我们做两件事情:

  1. 优化代码运行性能
  2. 优化代码打包速度
准备工作

首先我们准备上面写的配置文件两份,分别命名:webpack.dev.js、webpack.prod.js放在config文件夹下,目录结构如下:

├── 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 配置文件

修改的3处:
1、因为原来的webpack.config.js文件中位置发生了变化,所以配置中绝对的路径都要往上退回一层;
2、开发环境启用devserver开发服务器,会自动编译内容到内存环境,所以这里output的配置可以取消
3、注意mode设置为:development

const path = require('path');
const ESLintWebpackPlugin = require("eslint-webpack-plugin");module.exports = {//入口文件entry: {index: './src/main.js',admin: './src/main2.js',},//出口文件output: {path: undefined, // 开发模式没有输出,不需要指定输出目录filename: "static/js/[name]main.js", // 将 js 文件输出到 static/js 目录中,注意这个是多入口文件,记得带上变量[name]//clean: true, // 开发模式没有输出,不需要清空输出结果},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.sass$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片会被base64处理}},//设置图片打包后的路径generator: {filename: 'dist/images/[hash:10][ext][query]'}},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),],devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},//模式mode: 'development',
}

运行开发模式的指令:

npx webpack serve --config ./config/webpack.dev.js
3. 修改 webpack.prod.js 配置文件

配置文件需要修改的有4处:
1、因为原来的webpack.config.js文件中位置发生了变化,所以绝对路径要要回退上一级目录。相对路径相对命令运行目录不需要改变。;
2、生产环境要配置文件编译输出目录,和文件清空上一次的配置。
3、mode设置为:development
4、生产环境中没有devServer配置

const path = require('path');
const ESLintWebpackPlugin = require("eslint-webpack-plugin");module.exports = {//入口文件entry: {index: './src/main.js',},//出口文件output: {path: path.resolve(__dirname, "../dist"),// 输出文件名filename: "main.js",clean: true,  // 生产环境下需要清除内容},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.sass$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片会被base64处理}},//设置图片打包后的路径generator: {filename: 'dist/images/[hash:10][ext][query]'}},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),],// 开发服务器// devServer: {//     host: "localhost", // 启动服务器域名//     port: "3000", // 启动服务器端口号//     open: true, // 是否自动打开浏览器// },//模式mode: 'development',
}

运行生产模式的指令:

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

4. 配置运行指令

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

// package.json
{// 其他省略"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

http://www.ppmy.cn/embedded/142750.html

相关文章

Mysql常用sql语句

数据库操作 # 创建数据库 create database 库名 charsetutf8; # 使用数据库 use 库名; # 退出数据库 quit # 查看所有数据库 show databases; # 查看当前使用的数据库 select database(); # 删除数据库 drop database 库名; 表操作 #查看当前数据库中所有表 show tables;#创…

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

三要素之间关系: 有了虚拟场景Scene,相机录像Camera,在相机小屏幕上看到的Renderer Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上 首先先描述下Scene: 这个场景为三要素之一,一切需要展示的东西都需…

【已解决】git push需要输入用户名和密码问题

解决方法: 1)查看使用的clone方式: git remote -v 2)若为HTTPS,删除原clone方式: git remote rm origin 3)添加新的clone方式: git remote add origin gitgithub.com:zludon/git_test.git …

用php 处理 xls和xlsx (简单版)

安装扩展 composer require phpoffice/phpspreadsheet引入扩展 use PhpOffice\PhpSpreadsheet\IOFactory; use PhpOffice\PhpSpreadsheet\Spreadsheet;导入到php,xls 和xlsx都可以 下面是简单示例,有很多可以优化的地方和格式导入 $inputFileNameD:\…

Qt5语法的connect指定多个重载信号槽函数中的具体某一个

Qt5新语法的connect函数,使用起来更加简洁明了,但如果信号槽有同名的多个重载函数,只用类名和函数名就无法绑定,这时,可以使用qOverload来指定参数类型,例如: connect(ui->comboBox, qOverlo…

23种设计模式之外观模式

目录 1. 简介2. 代码2.1 SelectFoodService (选择食品)2.2 PayService (支付服务)2.3 TakeService (制作服务)2.4 OrderService (下单服务)2.5 Food (食品)2.6 TackingSystem (外观类)2.7 Test (测试类) 3. 优缺点3. 总结 1. 简介…

Linux vi/vim

Linux vi/vim 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在。 但是目前我们使用比较多的是 vim 编辑器。 vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序设计。 什么是 vim&…

设计模式(单例模式)

设计模式( Design Pattern )是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的,目的是为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。 单例模式:一个类只能创建一个对象,即单例模式&#xff…