Ron {·} Hai
cd ..

Webpack

# Vue # Webpack
隆海

Webpack使用

为什么需要 Webpack

  1. 随着前端需要处理的内容越来越多，同时也为了解决 JS 全局标识符污染问题，模块化开发成为了主流，但是浏览器却不能识别模块化。
  2. 随着新时代语法的更新，让开发更有效率，维护更方便。但是依然会有大量的新语法在很多浏览器上不太支持，开发和生成出现了问题，如 ES6 的语法。
  3. 为了提升开发效率，出现了大量的预编译语言，如 less,scss,但是这些语言不能被浏览器直接识别。那么就需要生产时提前编译，如果项目中用到了很多预编译语言，那么所有预编译语言的编译就是一一个繁琐的工作。
  4. 以前对于小图片请求性能的考虑，大多是做成精灵图，但是就算做成精灵图也是需要一次请求， 有的时候就是处于性能的考虑需要将图片编程 base64 的编码，因此也是需要一个编码的工具。
  5. 框架的出现和大量的使用，需要在开发时能够实时了解开发结果。
  6. 总之，随着技术的发展，就需要一一个工具来提升代码的开发效率，优化代码的编译。将浏览器不能识别的语法自动处理为浏览器能够识别的语法。

其他构建工具 Grunt/Gulp

  1. Grunt 是一个任务执行者，有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化的执行依赖的任务，每个任务的具体执行代码和依赖关系都写在配置文件 Gruntfile.js 里

  2. Gulp 是一个基于流的自动化构建工具.

  3. 简单的说:就是你定义了很多任务,让 Grunt/Gulp 自动去执行这些任务

Grunt/GulpSWebpackXtk

  1. Grunt/Gulp 更强调流程自动化,模块化不是核心
  2. Webpack 更强调模块化开发管理，而文件的压缩合并预处理功能都是附带的
  3. Webpack 的优点使得 Webpack 在很多场景下可以替代 Gulp/Grunt 类的工具。

Webpack 是什么

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

模块打包器

  1. 随着开发的复杂度越来越高，以前的开发方式已经难以满足我们的需要，为了更快更好的开发程序会大量的使用到模块化开发，以及一些优秀的预处理器(如 less, scss),
  2. 但这些模块化工具，浏览器不能够直接识别，所以我们就需要将开发的的代码转为大部分浏览器能识别的代码，所以我们需要一个工具，将我们的模块进行处理，这个处理的过程就是打包。
  3. 所以 webpack 就是前端模块化打包工具

Webpack 核心概念

入口(entry)

  1. 入口起点(entry point)指示 webpack 应该使用哪个模块(文件)，作为构建其内部依赖图的开始

  2. 说明: 在 webpack 构建时会先找到入口文件，然后在入口文件中无找到需要直接或间接依赖的模块 webpack 将每个依赖进行处理，最后出入构建后的结果

  3. 例如:

    module.exports = {
entry: 'index.js'

出口(output)

  1. Output:输出指示，告诉 Webpack 打包好的资源 bundles 输出到哪里去,以及如何命名输出的文件

  2. 例如:

    module.exports = {
entry : 'index.js',
output: {
    filename: 'handle.js', //配置导出的文件名
    path: resolve(_ dirname,'dist') // 将打包后的文件放在哪
    个文件夹中
    }
}

Loader 处理文件

  1. Webpack 核心只能处理 JavaScript 已经 JSON 资源文件,非 JS 文件 Webpack 只能交给 Loader 处理

  2. 通过来说就是通过 loader 将 webpack 不能是被的文件转成 webpack 能识别的模块

    module.exports = {
module: { // module
  rules:[ // 规则
    {
      //正则匹配
      test: N.css$/,
      //使用css-loader,将css转成js能识别的模块
      use: 'css-loader'
      }
    ]
	}
}

Plugin 插件

  1. Plugin 插件,可以用于执行范围更广的任务.插件的范围包括从打包优化,压缩到重新定义环境变量.

  2. 通俗的来了解,插件就是对于 webpack 功能的扩展

  3. 例如:

    const HtmlWebpackPlugin = require(' html-webpack plugin');
module.exports = {
plugins: [
new
HtmlWebpackPlugin();
}

Mode 模式

  1. Mode 模式，用来告诉 Webpack 在不同的模式下使用不同的配置主要有开发模式和生产模式

  2. Mode 模式用于指定 Webpack 打包使用相应模式的配置

Webpack 安装

1.全局安装

npm install -g webpack webpack-cli

2.局部安装

注意局部安装将 webpack 安装到开发依赖中

npm install webpack webpack-cli --save-dev

Webpack 和 Webpack-cli 介绍

Webpack 打包命令

总结

Webpack 配置

配置文件选项

打包 css 样式文件

打包 less 样式文件

打包 scss 样式文件

打包资源

打包 html 资源

应用

配置脚本命令

打包图片资源

图片打包配置

html 图片打包

打包其他资源

webpack-dev-server

性能优化

提取 CSS 到单独文件

Postcss

压缩 css

babel

HMR(热替换)

SourceMap

SourceMap 参数

多入口文件

HMR(模块热替换)

启用 HMR

启动 HMR

watch

缓存

Tree shaking

跨域

dlI 动态资源库

打包 vue

搭建 vue 开发环境

处理 CSS

处理 scss

其它

打包Typescript

初始化项目

npm init -y

安装依赖包

npm install -D typescript webpack webpack-cli ts-loader webpack-dev-server

创建typescript配置文件

tsc --init

创建webpack配置文件,根目录 创建文件webpack.config.js,文件夹src,public

webpack.config.js

const path = require("path"); //引入path模块
module.exports = {
  entry: "./src/index.ts", //入口文件
  output: {
    filename: "app.js", //输出文件名
    path: path.resolve(__dirname, "dist"), //输出文件路径
    publicPath: "/dist/", //dev去内存获取数据的公共路径
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, //ts或tsx文件结束的文件,
        use: "ts-loader", //使用ts-loader
        exclude: /node_modules/, //排除node_modules文件夹
      },
    ],
  },
};

package.json配置

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server  --mode=development ",
    "build": "webpack --mode=production  ",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.3",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  }
}

文件目录

image-20240305103024728

模块化处理

tsconfig.json更改模块

{
  "compilerOptions": {
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "module": "es6" /* Specify what module code is generated. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

src下新建user.ts

import { name, RH } from "./user";
console.log(name);
console.log(RH.host);

index.ts

export const name:string="Ronhai"

export namespace RH{
    export const host:string='www.tanghailong.com';
}

会报以下错误

image-20240305104013813

打包配置更改

webpack.config.js新增以下配置

  resolve: {
    extensions: [".tsx", ".ts", ".js"], //配置解析文件的后缀名
  },

image-20240305104432142

vue 构建工具-vite

vite 简介

使用 vite

vite 中使用 TypeScript

json 的使用

scss 的使用

jsx 的使用

分享
链接已复制，请打开微信粘贴分享复制失败，请手动复制链接
上一篇
常用语言的开发依赖安装库
下一篇
Linux 安装 Python3