Webpack

用webpack是为了管理项目结构（依赖包）、动态开发和运行、打包部署、混淆压缩生产文件等等 初始化包管理命令： ``` npm init -y ``` 当我们想要在项目使用jquery： ``` npm i jquery -S ``` npm安装时-S -D的区别是什么？ -S 即–save（保存 ......

# 作用 alt + shift + 鼠标左键 自动跳转 vscode项目的组件代码 # 项目地址 https://github.com/zh-lx/code-inspector/blob/main/packages/webpack-plugin/README.md # 使用方法 ``` npm i ......

学校放了个破保密专题课视频，还不能拉进度条，也不能控制台直接调倍速，我猜是把操作写在事件的回调函数里了。想覆盖一下js代码。 源代码结构如下： 用chrome一个插件把源代码下载下来： 好，接下来用shuji还原一下。但是没有js.map文件。没关系，去js里搜搜看： 喜，去下载一下： 仔细看看，这 ......

# Webpack 插件实现 CSS 样式尺寸单位转换 ## 实现方式一 ### 插件代码 以下是编写的一个 Webpack 插件，用于将样式文件中以 rpx 为单位的值转换为以 px 为单位的值（换算比率为 1px=2rpx）： ```javascript const pluginName = " ......

# AMD规范是什么？ 参考链接：https://blog.csdn.net/qq_43267592/article/details/103918703 1、定义 AMD规范全称是Asynchronous Module Definition，即异步模块加载机制。它完整描述了模块的定义，依赖关系，引用 ......

# **webpack笔记** *webpack* 是一个现代 JavaScript 应用程序的*静态模块打包器(module bundler)*。当 webpack 处理应用程序时，它会递归地构建一个*依赖关系图(dependency graph)*，其中包含应用程序需要的每个模块，然后将所有这些 ......

Vue CLI 3 构建的 Vue 2 项目，配置 webpack 的 SplitChunksPlugin 插件，可以按照以下步骤进行操作： 1. 打开项目根目录下的 `vue.config.js` 文件（如果没有该文件，可以在根目录下创建一个）。 2. 在 `vue.config.js` 文件中添 ......

前言图片在本地开发可以显示，但是打包部署后图片无法加载 修改webpack.config.js配置 将生成环境的publicPath的路径改为"./" 判断是开发环境还是生成环境 在package.json中通过 cross-env NODE_ENV=production 设置环境变量 通过 pro ......

# webpack5 此版本重点关注以下内容: - 通过持久缓存提高构建性能. - 使用更好的算法和默认值来改善长期缓存. - 通过更好的树摇和代码生成来改善捆绑包大小. - 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改. - 通过引入重大更改来为将来的功能做准备，以使我 ......

# Webpack 学习笔记 这篇学习笔记将用于记录本人在学习 Webpack 打包工具过程中所编写的心得体会与代码示例。为此，我会在`https://github.com/owlman/study_note`项目的`Programming/Client-Server/Frameworks`目录下创 ......

# 自动清理dist目录下的旧文件 为了在每次打包发布时`自动清理掉dist目录中的旧文件`，可以安装并配置`clean-webpack-plugin`插件： ``` // 1.安装清理dist目录的webpack插件 npm install --save-dev clean-webpack-plu ......

@[TOC](webpack的工作流程) # webpack的工作流程 说明工作流程之前，先抛出两个结论： ***webpack 的核心功能，是抽离成很多个内部插件来实现的。** **webpack插件通过监听对象对应的钩子而实现特定功能。*** *按照核心流程分为三个阶段：* 1. ***webp ......

webpack只能打包处理`一部分`高级的JavaScript语法。对于那些webpack无法处理的高级js语法，需要借助于`babel-loader`进行打包处理。例如webpack无法处理下面的JavaScript代码： ```js //定义装饰器函数 function info(target) ......

摘抄自：https://medium.com/@agzuniverse/webpack-and-babel-what-are-they-and-how-to-use-them-with-react-5807afc82ca8 Webpack and Babel — Tools we can’t cod ......

npm是第三方包管理器，npm init 之后会生成一个package.json文件，里面展示了项目中依赖的第三方包信息。 下载完node之后，npmjiu自动下载好了。 npm i packageName -S （-S 是 --save的缩写，依赖会保存在package.json文件的depend ......

## webpack 概念：webpack 是**前端项目工程化的具体解决方案**。 主要功能：它提供了友好的前端模块化开发支持，以及**代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化**等强大的功能。 目前 Vue，React 等前端项目，基本上都是基于 webpack 进行 ......

完整的报错提示如下: BREAKING CHANGE: The request './module2' failed to resolve only because it was resolved as fully specified(probably because the origin is s ......

## webpack4 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bund ......

1.安装插件 yarn add webpack-bundle-analyzer --D 2.配置 vue.config.js 文件 module.exports = { ....其它的配置 chainWebpack: (config) => { if (process.env.NODE_ENV 'p ......

# 打包处理样式表中与`url路径相关`的文件 1. 运行 `npm i url-loader file-loader -D` 命令 1. 在webpack.config.js的module->rules数组中，添加loader规则如下： ```js module: { rules: [ //定义了 ......

# 打包处理less文件 1. 运行 npm i less-loader less -D 命令 1. 在webpack.config.js的module->rules数组中，添加loader规则如下： ```js module: { rules: [ //定义了不同模块对应的loader {test ......

# loader概述 在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他`非.js后缀名结尾的模块`，webpack默认处理不了，`需要调用loader加载器才可以正常打包`，否则会报错！ loader加载器的作用：`协助webpack打包处理特定的文件模块`。比如： - ......

废话不多数，直接说原因和结果 原因：image-webpack-loader问题 我之前安装的是image-webpack-loader最新版本大约是8+，安装的时候没有报错，运行项目的时候报错，我看了报错大致就是讲图片引入解析错误，后来想到版本问题的天坑，就把image-webpack-loade ......

# devServer节点 在webpack.config.js配置文件中，可以通过`devServer`节点对webpack-dev-server插件进行更多的配置,示例代码如下： ```json devServer:{ open:ture,//初次打包完成后，自动打开浏览器 host:'127. ......

1、先准备项目 运行 npx create-app-react projectName创建一个 react 项目，为了不暴露 webpack 的配置，我们不运行 npm run eject命令暴露配置，因此我们还需要安装 react-app-rewired 和 customize-cra 来进行对项 ......

# 安装html-webpack-plugin 运行如下的命令，即可在项目中安装此插件： npm install html-webpack-plugin -D # 配置html-webpack-plugin ```js // 导入html插件，得到一个构造函数 const HtmlPlugin = ......

# webpack插件的作用 通过安装和配置第三方的插件，可以`拓展webpack的能力`，从而让webpack`用起来更方便`。最常用的webpack插件有如下两个： 1. `webpack-dev-server` - 类似于node.js阶段用到的nodemon工具 - 每当修改了源代码，web ......

# webpack中的默认约定 在webpack4.x和5.x的版本中，有如下的默认约定： 1. 默认的打包入口文件为`src`->`index.js` 1. 默认的输出文件路径为`dist`->`main.js` 注意：可以在webpack.config.js中修改打包的默认约定 # 自定义打包的 ......

# mode的可选值 `mode节点`的可选值有两个，分别是： 1. development - `开发环境` - `不会`对打包生成的文件进行`代码压缩`和`性能优化` - 打包`速度快`，适合在`开发阶段`使用 1. production - `生产环境` - `会`对打包生成的文件进行`代码压 ......

# 在项目中安装webpack 在终端运行如下的命令，安装webpack相关的两个包： npm install webpack@5.42.1 webpack-cli@4.7.2 -D # 在项目中配置webpack 1. 在项目根目录中，创建名为`webpack.config.js`的webpack ......