聊聊webpack5吧~

1.认识webpack

webpack 是一个用于现代 JavaScript 应用程序的 打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,可以在浏览器上直接运行。在 webpack 看来, 前端的所有资源文件(js、json、css、img 、html...)都会作为模块处理。

  • 解决方案:前端工程化(Webpack),在企业级的前端项目开发中,把前端开发所需的工具、技术、 流程、经验等进行规范化、标准化

本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容

介绍:

总结:

  • webapck是一个构建工具,是基于node的,电脑上必须安装node,node版本需要大于16
  • 打包器,是从入口开始,按照模块依赖进行打包,最终得到浏览器的可以识别的静态资源。
  • 从某种程度来说,webpack代表的是一种架构能力。

2.搭建环境

所需要的依赖如下:

json 复制代码
{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.18.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.0",
    "postcss-preset-env": "^7.7.1",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "vue-template-loader": "^1.1.0",
    "webpack": "^5.73.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "vue": "^3.2.37",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

使用cnpm i进行安装

可以通过npx webpack -v测试是否安装成功(因为是在项目中安装,所以需要使用npx)

零配置打包,命令如下:

将 src/index.js 打包至 dist/main.js 模式默认值:production
npx webpack

将 src/index.js 打包至 dist/main.js 模式指定为:development
npx webpack --mode development

将 src/one.js 打包至 dist/main.js
npx webpack ./src/one.js --mode development

将 src/one.js、two.js 打包至 dist/main.js
npx webpack ./src/one.js ./src/two.js --mode development

将 src/one.js 打包至 build/main.js
npx webpack ./src/one.js --output-path build --mode development

将 src/two.js 打包至 dist/index.js
npx webpack ./src/two.js --output-filename index.js --mode development

将 src/one.js 和 src/two.js 打包至 build/index.js
npx webpack ./src/one.js ./src/two.js --output-path build --output-filename index.js --mode development

打包模式:

  • 开发模式 development

    • 开发模式顾名思义就是我们开发代码时使用的模式,是为开发者更方便开发而存在的,在开发模式下,一般是为了更方便的调试,所以错误信息会提示很全面,并且存在热更新状态等。这个模式下我们主要做两件事:

      • 编译代码,使浏览器能识别运行,开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源。
      • 代码质量检查,树立代码规范,提前检查代码的一些隐患,让代码运行时能更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。
  • 生产模式 production

    • 生产模式是开发完成代码后,我们需要得到代码将来部署上线,在生产模式下,会去掉更多的错误提示,让想打包尽可能变小等。这个模式下我们主要对代码进行优化,让其运行性能更好。优化主要从两个角度出发:

      • 优化代码运行性能
      • 优化代码打包速度 开始打包: 指定模式打包,如下: 指定入口文件:

webpack的五大核心概念:

  • Entry: 指示 webpack 从哪个文件开始打包 。
  • Output: 指示 webpack 打包完的文件输出到哪里去,如何命名等 。
  • Loader: webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析 。
  • Plugins: 扩展 webpack 的功能 ,如打包优化、压缩等。
  • Mode:模式,有生产模式 production 和开发模式 development 两种。 代码如下:
js 复制代码
module.exports = {
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {}
}

开始打包,如下: 看一下,打包后文件,如下: 指定mode,如下: 需要webpack.config.js文件名变了,打包时,需要手动指定,如下:

可以在package.json配置一个脚本

json 复制代码
"dev":"webpack --config webpack.config.js"

运行脚本

arduino 复制代码
cnpm run dev
npm run dev

3.入口和出口

path

js 复制代码
//path是node中的内置模块
const path=require("path")
//__dirname是node中内置变量
//即E:\2402\第四阶段\react-webpack\src
console.log(__dirname)
//E:\2402\第四阶段\react-webpack\src\main.js
console.log(path.resolve(__dirname,"main.js"))

入口可以写成相对地址,绝对地址,以及对象

js 复制代码
const path = require("path")

module.exports = {
  mode: "development", // 开发打包
  // 入口
  // entry: "./src/main.js",
  // entry: path.resolve(__dirname, "src/main.js"),  // 绝对路径
  entry: {
    // app表示你打包后的资源名字就是app
    app1: path.resolve(__dirname, "src/main.js"),  // 绝对路径
  },
  // 出口
  output: {}
}

出口指定的地址必须是一个绝对路径,相对路径会报错 最好还是叫dist,有的地方,叫build,我们就叫dist。 filename可以指定一个格式化字符串,可以指定hash值。说白了,输入的JS模块所依赖的源码发生了变化,打包时,hash值也会发生变化,用于解决浏览器缓存导致页面不刷新的问题。 将打开后的js文件,放到js文件夹下面的

js 复制代码
const path = require("path")

module.exports = {
  mode: "development", // 开发打包
  // 入口
  // entry: "./src/main.js",
  // entry: path.resolve(__dirname, "src/main.js"),  // 绝对路径
  entry: {
    // app表示你打包后的资源名字就是app
    app: path.resolve(__dirname, "src/main.js"),  // 绝对路径
  },
  // 出口
  output: {
    path: path.resolve(__dirname, "dist"),  // 绝对路径
    // filename:"bundle.js"  // 一捆  一束
    filename: "js/[name].[chunkhash:8].js"  // 一捆  一束
  }
}

4.配置开发服务器

到目前为止 webpack 基本上可以正常使用了,但在实际开发中你可能会需要:

  • 提供 HTTP 服务而不是使用本地文件预览;
  • 监听文件的变化并自动刷新网页,做到实时预览;
  • 支持 Source Map,以方便调试。

前面打包是把包打包到硬盘上的。在开发时,需要配置一个开发服务器,这个开发服务器可以直接让我们在内存中打包,速度是远远高于硬盘的。我们之前用的脚手架,都是在内存中打开。

window.config.js中配置开发服务器 package.json中配置一个脚本,通过npm run serve执行

5.创建页面,把打包后的js插入页面

创建一个页面 访问localhost:8080/index.html 使用html-webpack-plugin插件 在内存中打包(npm run serve),测试结果(打开localhost:8080/index.html) ! ! ! 此时在浏览器中跑的代码是你打包以后的代码

代码的配置如下

js 复制代码
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
 mode: "development", // 开发打包
 // 入口
 // entry: "./src/main.js",
 // entry: path.resolve(__dirname, "src/main.js"),  // 绝对路径
 entry: {
   // app表示你打包后的资源名字就是app
   app: path.resolve(__dirname, "src/main.js"),  // 绝对路径
 },
 // 出口
 output: {
   path: path.resolve(__dirname, "dist"),  // 绝对路径
   // filename:"bundle.js"  // 一捆  一束
   filename: "js/[name].[chunkhash:8].js"  // 一捆  一束
 },
 // 配置开发服务器
 devServer: {
   port: 8080
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: "./public/index.html"
   })
 ]
}

6.区分硬盘打包和内存打包

打包分两种,一种是开发时的打包,一种是生产时的打包。不同的打包方式,是有不同的配置的,现在有两种打包方式,也就是说有两种配置,但是这两种配置中有一些公共的配置,把这些配置区分出来,创建build.js(生产配置),config.js(开发和生产的公共配置),serve.js(开发配置)

config.js(开发和生产的公共配置)

serve.js(开发配置)

build.js(生产配置)

在package.json中配置脚本,如下 使用合并,做出开发模式时 config.js(开发和生产的公共配置)+serve.js(开发配置),生产配置时build.js(生产配置)+config.js(开发和生产的公共配置)的效果 webpack.config.js代码如下: 在cdm中输入npm run build npm run serve即可使用

相关推荐
贵沫末13 分钟前
React——基础
前端·react.js·前端框架
aklry25 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9332 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子32 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982433 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug35 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo35 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端