当前位置： 首页 > news >正文

【Webpack--011】配置开发和生产模式的webpack.config.js

news 2024/9/19 22:55:50

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问 作者个人博客网站：sam9029.asia—Webpack入门笔记

配置开发和生产模式的config

生产模式介绍

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

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

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

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

生产模式准备

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

文件目录

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

拓展 package.json 文件

{"name": "testdemo4","version": "1.0.0","description": "","main": "webpack.config.js","private": "true","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "npx webpack serve --config ./webpack.dev.js","build:prod": "npx webpack --config ./webpack.prod.js","build": "npx webpack"},"keywords": [],"author": "","license": "ISC","dependencies": {},"devDependencies": {"@babel/core": "^7.24.9","@babel/preset-env": "^7.24.8","babel-loader": "^9.1.3","css-loader": "^7.1.2","css-minimizer-webpack-plugin": "^7.0.0","eslint": "^9.7.0","eslint-webpack-plugin": "^4.2.0","html-webpack-plugin": "^5.6.0","less-loader": "^12.2.0","mini-css-extract-plugin": "^2.9.0","postcss": "^8.4.39","postcss-loader": "^8.1.1","postcss-preset-env": "^9.6.0","sass": "^1.77.8","sass-loader": "^14.2.1","style-loader": "^4.0.0","webpack": "^5.93.0","webpack-cli": "^5.1.4","webpack-dev-server": "^5.0.4"},"browserslist": ["last 2 version","> 1%","not dead"]
}

配置 webpack.dev.js

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

/*** 开发模式配置*//** nodejs -- path文件路径模块 */
const path = require("path");/** eslint代码检测 */
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
/** html文件处理  */
const HtmlWebpackPlugin = require("html-webpack-plugin");
/** css文件提取处理 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/** css文件压缩处理 */
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//#region ===== tool 工具函数集
/*** @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader，同时接收传参自定义loader* @param {Array} preProcessorList []* @returns*/
const setStyleLoaders = (preProcessorList = []) => {return [// 单独提取css文件loaderMiniCssExtractPlugin.loader,// 基础css-loader"css-loader",// css代码兼容处理loader配置{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},// 外部传入自定义 loader...preProcessorList,].filter(Boolean); // 筛选所有存在的loader
};
//#endregionmodule.exports = {/** 入口文件 */entry: "./src/main.js",/** 输出文件配置 */output: {path: undefined, // 开发模式没有输出，不需要指定输出目录// 注意这里配置的是所有JS文件的输出路径，其他类型单独在 module-rules中配置filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中// clean: true, // 开发模式没有输出，不需要清空输出结果},/** 路径别名 */resolve: {alias: {"@": path.resolve(__dirname, "src/"),},},/** module  */module: {rules: [/** 处理 CSS 文件 */{test: /\.css$/,use: setStyleLoaders(), // 结果为： [MiniCssExtractPlugin.loader, "css-loader"],},/** 处理 less 文件 */{test: /\.less$/,use: setStyleLoaders(["less-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]},/** 处理 scss or sass 文件 */{test: /\.s[ac]ss$/,use: setStyleLoaders(["sass-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]},/** 处理 图片资源 */{test: /\.(png|jpe?g|gif|webp)$/,type: "asset", // 资源类型为 asset，Webpack 会根据文件类型选择合适的加载器进行处理, 比如 url-loaderparser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被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?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},/** 媒体资源输出目录 */{test: /\.(mp4|mp3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},/** JS 文件的 babel 处理代码语法兼容性 */{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译// 也可以用包含 include: path.resolve(__dirname, "../src"),loader: "babel-loader",options: {cacheDirectory: true, // 开启babel编译缓存cacheCompression: false, // 缓存文件不要压缩},},],},/** plugins */plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "./src"), // 注意路径exclude: "node_modules", // 默认值cache: true, // 开启缓存// 缓存目录cacheLocation: path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js、css等资源template: path.resolve(__dirname, "./public/index.html"), // 注意路径}),/** css文件提取处理 */new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),/** css压缩  */new CssMinimizerPlugin(),],/** 配置开发服务器 */devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 热更新},/** 环境模式---开发模式 */mode: "development", // development or productiondevtool: "eval-source-map",
};

运行开发模式的指令：

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

配置 webpack.prod.js

/*** webpack.config.js 配置参考标准*//** nodejs -- path文件路径模块 */
const path = require("path");/** eslint代码检测 */
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
/** html文件处理  */
const HtmlWebpackPlugin = require("html-webpack-plugin");
/** css文件提取处理 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/** css文件压缩处理 */
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//#region ===== tool 工具函数集
/*** @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader，同时接收传参自定义loader* @param {Array} preProcessorList []* @returns*/
const setStyleLoaders = (preProcessorList = []) => {return [// 单独提取css文件loaderMiniCssExtractPlugin.loader,// 基础css-loader"css-loader",// css代码兼容处理loader配置{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},// 外部传入自定义 loader...preProcessorList,].filter(Boolean); // 筛选所有存在的loader
};
//#endregionmodule.exports = {/** 入口文件 */entry: "./src/main.js",/** 输出文件配置 */output: {// 输出到本地根目录，所有输出文件的跟目录 ，dist文件夹下path: path.resolve(__dirname, "dist"),// 注意这里配置的是所有JS文件的输出路径，其他类型单独在 module-rules中配置filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中// 自动将上次打包目录资源清空clean: true,},/** 路径别名 */resolve: {alias: {"@": path.resolve(__dirname, "src/"),},},/** module  */module: {rules: [/** 处理 CSS 文件 */{test: /\.css$/,use: setStyleLoaders(), // 结果为： [MiniCssExtractPlugin.loader, "css-loader"],},/** 处理 less 文件 */{test: /\.less$/,use: setStyleLoaders(["less-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]},/** 处理 scss or sass 文件 */{test: /\.s[ac]ss$/,use: setStyleLoaders(["sass-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]},/** 处理 图片资源 */{test: /\.(png|jpe?g|gif|webp)$/,type: "asset", // 资源类型为 asset，Webpack 会根据文件类型选择合适的加载器进行处理, 比如 url-loaderparser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被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?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},/** 媒体资源输出目录 */{test: /\.(mp4|mp3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},/** JS 文件的 babel 处理代码语法兼容性 */{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译// 也可以用包含 include: path.resolve(__dirname, "../src"),loader: "babel-loader",},],},/** plugins */plugins: [/** eslint 检测 */new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),exclude: "node_modules", // 默认值}),/** 模板 html 处理 */new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js、css等资源template: path.resolve(__dirname, "public/index.html"),}),/** css文件提取处理 */new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),/** css压缩  */new CssMinimizerPlugin(),],/** 配置开发服务器--生产环境不用配置 *//** 环境模式 */mode: "production", // development or production
};

运行生产模式的指令：

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

配置运行指令

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

// package.json
{// 其他省略"scripts": {"start": "npm run dev","dev": "npx webpack serve --config ./config/webpack.dev.js","build:prod": "npx webpack --config ./config/webpack.prod.js",}
}

以后启动指令：

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

http://www.mrgr.cn/news/30397.html

相关文章：

  • Java数据结构 时间复杂度和空间复杂度
  • PMP 报考条件是有哪些？
  • Linux命令：对文本文件的内容进行排序的工具sort详解
  • 代码随想录算法训练营43期 | Day 21 —— 108.将有序数组转换为二叉搜索树、 538.把二叉搜索树转换为累加树
  • Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能
  • 多路径文件批量下载工具V1.0.3-支持批量下载文件到单独文件夹的工具-供大家学习研究参考
  • 命令可选参数说明
  • 利用条件编译解决vivado下verilog代码中ila与仿真的共存问题
  • 感知笔记：ROS 视觉- 跟随红球
  • Redis集群知识及实战
  • 攻防世界---＞debug
  • OpenCV 1
  • HBase初探笔记
  • macOS平台编译MAVSDK源码生成mavsdk库与mavsdk_server服务可执行文件
  • 计算机网络32——Linux-文件io-2文件系统
  • 前端面试题——token安全问题处理与大数据列表展示
  • 借助keepalived配置高可用nginx集群
  • 数字自然资源领域的实现路径
  • 小程序uniapp元素动态样式的写法
  • 如何使用 Next.js 进行服务端渲染（Server-Side Rendering, SSR）