大厂做网站,小区住宅可以注册公司吗,seo 推广教程,登录全球最大的域名注册商网站一、什么是 Webpack
Webpack 是一款 JS 模块化开发的技术框架#xff0c;其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。
Webpack 拥有丰富的 plugins / loaders 插件生态圈#xff0c;可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue…一、什么是 Webpack
Webpack 是一款 JS 模块化开发的技术框架其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。
Webpack 拥有丰富的 plugins / loaders 插件生态圈可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等这也让 Webpack 至今仍然在许多项目中仍有一席之地。 尽管现在的构建工具百花齐放如 vite, vue-cli, craco, esbuild, glup, rollup 但大部分构建工具的许多概念基本都是相通的我认为学习 webpack 依然是前端人员必学技能之一。 二、使用 Webpack
2.1 准备工作 新建案例项目 webpack-example 安装 Webpack
mkdir webpack-example cd webpack-example
yarn init -y
yarn add webpack webpack-cli -D当前 Webpack 版本5.88.2 新建目录文件
mkdir src cd src touch index.js
cd ../ touch index.html结构如下
2.2 编译打包
这里分几个步骤
index.js 代码改造
const sayHi () {alert(Hello, webpack!)
}
sayHi()package.json 配置 webpack 脚本并执行。
scripts: {build: webpack},构建后的产物默认会放在 dist 目录。
index.html 引入产物
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./dist/main.js/script
/head
body/body
/html本地 server 打开 index.html 即可 你可能会问这和直接引入 src/index.js 有何区别别急还没体现 webpack 能力呢。
继续改造
在 src/ 新增 date.js tools.js 俩文件 内容如下
// src/date.js
export const getDate () {return new Date().toLocaleDateString()
}
// src/tools.js
export const add (a, b) {return a b
}在 src/index.js 中引入
// 引入
import { getDate } from ./date
import { add } from ./toolsconst run () {console.log(The date is: , getDate())console.log(10 20 is equal, add(10, 20))
}
run()重新 build 可以看到 date.js 和 tools.js 被一起打包进 main.js 文件模块化开发概念有没有逐渐涌现出来 三、接入 CSS
截至目前我们依旧未使用 webpack 配置的能力仅通过一个 build 命令。
现在开始思考下在不依赖 webpack 的情况下js 中引入 css 文件可行
当然没问题现代浏览器基于 ES6 语法可以直接引入 css 文件。 但你会发现引入后抛出 MIME 错误这是因为它只负责请求不负责非 JS 响应资源处理。
下面用 webpack 配置来解决。
3.1 准备工作
安装依赖包
yarn add style-loader css-loader -D解释css-loader 将 css 内容打包成 CommonJS style-loader 引入 CommonJS 并将其插入到页面 style 中这两个是必不可少的。 3.1 配置使用
项目新建 webpack.config.js 文件内容如下
module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},
};解释rules 作为引入 loader 的入口test 表示要处理匹配的文件后缀名。 rules 的选项还有很多这里仅以最简单的方式作为演示。 use 执行顺序从最后开始 css-loader - style-loader 。 src/ 新增 index.css 文件样式如下
body {background-color: cyan;
}src/index.js 引入
// ...
import ./index.css
// ...调整 package.json build 脚本指定配置
scripts: {build: webpack --configwebpack.config.js},重新 build 即可看到效果
在 dist/ 产物中可以看到css 样式是通过 JS 插上去的你可能会问这和在 index.html 中直接引入 css 有何不同
关于这个问题我想说如果是 100 个 css 呢毕竟一个项目的 css 文件数量是非常多的。 再比如像 scss, less 这些 CSS 预处理语言的文件呢总不可能手动引入吧
还是得靠 webpack 只需引入对应的插件和 loader 即可为了让 webpack 入门纯粹点这里不再详细赘述。
四、接入 Typescript
随着越来越多的项目引入 TS似乎就成了前端必学的“新语言”~
如果还没用过 Typescript 的同学可参考TypeScript 日常基本语法 再回头看本文。
4.1 准备工作
安装依赖包
yarn add typescript ts-loader -D解释typescript 是一款专门将 ts 编译成 js 的工具本身可以独立存在而 ts-loader 充当 typescript 与 webpack 之间的信号传递者。 4.2 配置使用
在 webpack.config.js 中配置如下
module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},// 新增{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/, // 不处理 node_modules 。},],},resolve: {// 调整后缀解析优先级。extensions: [.ts, .tsx, .js],},
};提示配置 extensions 的原因是Webpack 默认以 src/index 作为编译入口再根据默认后缀优先级顺序 [‘js’, ‘json’, ‘.wasm’] 开始解析为了避免解析现有的 index.js这里要手动调整 extensions 当然也可以设置 entry 这里先不演示后面会讲到。 在 src/下新增 index.ts 文件内容如下 import { getDate } from ./date
import { add } from ./tools
import ./index.css
// 这里用 TS 提供的 void 语法作为测试。
const run (): void {console.log(The date is: , getDate())console.log(10 20 is equal, add(10, 20))
}
run()重新 build效果和原来一样
五、接入 Babel
balbel 是一款是专门将 JS 高级语法编译为可执行的低版本语法编译器比如 ES6/7/8 - ES5。 如果还没用过的同学可参考JS 介绍 Babel 的使用及 presets plugins 的概念 再回头看文本。
5.1 准备工作
安装依赖
yarn add babel-loader babel/core babel/preset-env -D解释 - babel/core 是编译 JS 的核心逻辑即编译器。 - babel/preset-env 基于编译器集成了各种插件比如 es6 - es5, class - prototype链式 ?. 语法等。 - balbel-loader 充当 babel/core 与 webpack 之间的信号传递者。
5.2 配置使用
webpack.config.js
module.exports {// 新增开启本地调试模式让产物不要压缩。mode: development,// 新增指定编译入口避免与上章节的 index.ts 冲突。entry: ./src/index.js,module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/,},// 新增{test: /\.(?:js|ts)$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [[babel/preset-env]]}}}],},
};在 index.js 中使用高版本语法作为演示比如 ES6 的 const 声明关键字
const run () {console.log(The date is: , getDate())console.log(10 20 is equal, add(10, 20))
}
run()重新 build在 dist/main.js 源码中便可看到 const 被转成了 var
5.3 babel 兼容 ts
先将 entry 引入为 ./src/index.ts
// webpack.config.js
...
entry: ./src/index.ts,
...src/index.ts 语法如下这里用 void 作为演示
import ./index.css
const run (): void {const obj { num: 100 }console.log(Hello, webpack, obj?.num 100)
}
run()执行 build
yarn build你会发现 babel 并不识别 .ts 文件直接报错了 这是因为 babel 默认仅支持 JS对于 TS 还得单独处理
安装 Babel 插件 yarn add babel/preset-typescript -D解释
babel/preset-typescript 是基于 babel-core 编译器实现出来的插件就是让 babel 可识别 .ts 后缀。 注意插件本身不负责编译 ts - js仅仅对 ts 源码以 js 的角度来进行转换处理。 引入插件
module.exports {mode: development,entry: ./src/index.ts,module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/,},{test: /\.(?:js|ts)$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [[babel/preset-env,],// 新增[babel/preset-typescript,]],}}}],},
};重新 build 即可
F Q A
4.1 Webpack 和 Babel 有什么区别
咋一看Webpack 和 Babel 好像都能编译 JS这两者间有何区别呢其实区别还是蛮大的
Webpack 就像一位 JS 文件管理者拥有着大量的处理不同文件产物的插件圈最终将各种文件联起来形成页面应用。Babel 可以将 JS 代码编译为可向下兼容运行的低版本代码它也有着丰富的插件圈但它们是专门与 js 源码打交道的这也是与 webpack 最大的区别。
换个角度想如果 webpack 和 babel 都是干同一份工作那两者就不可能一起运作属矛盾关系。
4.2 Webpack 文档资料过于庞大有必要全阅读完
这是完全没必要的每个人的工作性质都不一样用到哪看到哪儿即可过不了多久还是会忘记。
4.3 Webpack 是不是过时了
Webpack 从配置概念上看并不过时它就像构建工具们的老师可以从中学到许多东西。 完
