两个有用的微前端框架
实际的前端开发
- 模块化（js的模块化，CSS的模块话，资源的模块化）
- 组件化（复用现有的UI结构、样式、行为）
- 规范化（目录结构的划分、编程规范化、接口规范化、文档规范化、Git分支管理）
- 自动化（自动化构建、自动部署、自动化测试）
webpack实际应用
指令
- npm init -y 初始化包管理文件package.json
- npm install packageName -S -S明确告诉npm所加载的包进入到dependencies目录下，该目录下的配置是开发环境和线上环境都能用到的
- npm install webpack@版本号 wbpack-cli@版本号 -D 安装webpack，-D明确告诉npm所加载的包进入devDependencies目录下，该目录下放置只在开发环境能用到的资源
- 注意：
-S：是--save的简写
-D：是--save-dev的简写
基本使用
- 在项目的根目录下创建一个webpack.config.js的webpack配置文件，并初始化如下的基础配置：
module.exports = {
mode: 'development'
}
- 在package.json的scripts节点下，新增的脚本如下：
"scripts": {
"dev": "webpack"
}
-
在终端中运行npm run dev命令，启动webpack进行项目的打包构建
-
webpack的基本使用
4.1：mode的可选值
mode节点的可选值有两个，分别是
- development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
- production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
4.2 webpack.config.js 文件的作用
- webpack.config.js是webpack的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件从而基于给定的配置，对项目进行打包。
- 注意:由于 webpack 是基于 node.is 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。
4.3 webpack的默认约定
在webpack4.X和webpack5.X的版本中，有如下的默认约定：
- 默认的打包入口文件为src -> index.js
- 默认的输出文件路径为dist -> main.js
- 注意：可以在webpack.config.js中修改打包的默认约定
4.4自定义打包的入口与出口
在webpack.config.js配置文件中通过entry节点指定打包入口。通过output节点指定打包的出口
const path = require('path') module.exports = { entry: path.join(__dirname, "../src/index.js"), // 打包入口的文件路径 output: { path: path.join(__dirname, "./dist"), // 输出文件的存放路径 filename: 'bundle.js' // 输出文件的名称 } }
webpack中的插件
-
插件的作用
- 通过安装第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有以下两个：
- webpack-dev-server
- 类似于node.js阶段用到的nodemon工具
- 每当修改了源代码，webpack会自动进行项目打包和构建
- html-webpack-plugin
- webpack中的Html插件（类似于一个模板引擎插件）
- 可以通过此插件自定制index.html页面的内容
-
webpack-dev-server
2.1 安装webpack-dev-server
运行如下的命令，即可在项目中安装这个插件：npm install webpack-dev-server@版本号 -D
2.2 配置webpack-dev-server- 修改package.json->scripts中的dev命令如下：
"scripts": { "dev": "webpack serve" }- 再次运行npm run dev命令
- 在浏览器中访问http://localhost:8080/地址，查看自动打包效果
注意：webpack-dev-server会启动一个实时打包的http服务器
注意： 我配置完这些之后，访问http://localhost:8080/报错了，not get 404，我按照下面的步骤解决了一下：
- 我先是输入http://localhost:8080/webpack-dev-server看看能不能看到webpack仪表盘
- 再看http://localhost:8080/bundle.js看看能不能看到打包成功的文件(为了确保万无一失，全局搜索一下自己写的代码)
- 发现上面都没问题之后，查阅文档说要配置静态文件目录
devServer: { static: { directory: path.join(__dirname, 'src'), // 如果 HTML 在 src/ 目录 }, },- 但是我配置完之后，发现我的js代码并没有生效，查阅资料说index.html什么默认不会注入打包的bundle.js，这个看上去不知道咋理解，以为我已经使用
webpack中的loader
在实际开发过程中，webpack默认只能打包处理.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。
1. loader加载器的作用：协助webpack打包处理特定的模块，比如：
- css-loader 可以打包处理.css相关的文件
- less-loader 可以打包处理.less相关的文件
- babel-loader 可以打包处理webpack无法处理的高级js语法
2. loader的调用过程
flowchart LR
将要被webpack打包\n处理的文件模块 --> B{是否为js模块}
B -- 是 --> C{是否包含\n高级js语法}
B -- 否 --> D{是否配置了\n对应loader}
C --> E{是否配置了\nbabel}
C --> webpack进行处理
D -- 是 --> 调用loader处理
D -- 否 --> 报错
E-- 是 --> 调用loader处理
E -- 否 --> 报错
3. 打包处理css文件
- 运行如下的命令，即可在项目中安装处理css文件的loader：npm install style-loader@版本号 css-loader@版本还 -D
- 在webpack.config.js的module->rules数组中，添加loader规则如下：
module: {
rules: [
{
test: /\.css$/, // 匹配所有 .css 文件
use: ['style-loader', 'css-loader'], // 使用这两个 Loader 处理
}
],
},
注意：
- use数组中指定的loader顺序是固定的
- 多个loader调用的顺序是：从后往前调用
css文件的处理过程
- webpack 默认只能打包处理 .js 结尾的文件，处理不了其它后缀的文件
- 由于代码中包含了 index.css 这个文件，因此 webpack 默认处理不了
- 当 webpack 发现某个文件处理不了的时候，会查找 webpack.config.js 这个配置文件看 module.rules 数组中，是否配置了对应的 loader 加载器。
- webpack 把 index.css 这个文件，先转交给最后一个loader 进行处理(先转交给 css-loader)
- 当 css-loader 处理完毕之后，会把处理的结果，转交给下一个loader(转交给 style-loader)
- 当 style-loader 处理完毕之后，发现没有下一个loader 了，于是就把处理的结果，转交给了 webpack
- webpack 把 style-loader 处理的结果，合井到 /dist/bundle,js中，最终生成打包好的文件。
4. 打包处理less文件
- 运行如下的命令，即可在项目中安装处理css文件的loader：npm install less-loader@版本号 less@版本号 -D
- 在webpack.config.js的module->rules数组中，添加loader规则如下：
module: {
rules: [
{
test: /\.less$/, // 匹配所有 .less 文件
use: ['style-loader', 'css-loader', 'less-loader'], // 使用这两个 Loader 处理
}
],
},
5.打包处理样式表中与url路径相关的文件
- 运行如下的命令，即可在项目中安装处理url路径相关的文件的loader：npm install url-loader@版本号 -D
- 在webpack.config.js的module->rules数组中，添加loader规则如下：
module: {
rules: [
{
test: /\.jpg|png|gif$/, // 匹配所有图片文件
use: ['url-loader?limit=22229'],
}
],
},
其中？之后的是loader的参数项
- limit是用来指定图片的大小，单位是字节（byte）
- 只有≤limit的图片才会转成base64的形式
6.打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript 语法。对于那些 webpack 无法处理的高级js 语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的JavaScript 代码:
// 1.定义了名为 info 的装饰器
function info(target){
//2.为目标添加静态属性 info3
target.info = 'Person info'
}
// 3.为 Person 类应用 info 装饰器
@info
class Person {}
//4.打印 Person 的静态属性 info
console.1og(Person.info)
- 运行如下的命令安装对应的依赖包:
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
- 在 webpack.config.js 的 module ->rules 数组中，添加 loader 规则如下:
//注意:必须使用 exclude 指定排除项:因为 node_modules目录下的第三方包不需要被打包
{ test:八.js$/,use: 'babel-loader',exclude: /node modules/ }
我遇到下面的问题：
- 首先说明一下我运行的安装指令是
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D - 然后我配置好了之后，运行报错
> webpack@1.0.0 dev
> webpack serve --open
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:80/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\卞款款\Desktop\webpack\src' directory
assets by status 60.9 KiB [cached] 2 assets
runtime modules 27.4 KiB 12 modules
orphan modules 33.4 KiB [orphan] 4 modules
cacheable modules 109 KiB
modules by path ./node_modules/webpack-dev-server/client/ 84.8 KiB
./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=127.0....(truncated) 53.7 KiB [built] [code generated]
./node_modules/webpack-dev-server/client/utils/log.js 545 bytes [built] [code generated]
+ 2 modules
modules by path ./node_modules/webpack/hot/*.js 5.17 KiB
./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
./node_modules/webpack/hot/log.js 1.73 KiB [built] [code generated]
./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
./node_modules/webpack/hot/log-apply-result.js 1.43 KiB [built] [code generated]
./src/index1.js 39 bytes [built] [code generated] [1 error]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
ERROR in ./src/index1.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\卞款款\Desktop\webpack\src\index1.js: Support for the experimental syntax 'decorators' isn't currently enabled (17:1):
15 | }
16 | // 3.为 Person 类应用 info 装饰器
> 17 | @info
| ^
18 | class Person {}
19 |
20 | //4.打印 Person 的静态属性 info
Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
npx cross-env BABEL_SHOW_CONFIG_FOR=C:\Users\卞款款\Desktop\webpack\src\index1.js <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.
webpack 5.99.9 compiled with 1 error in 1044 ms
- 我最终是又安装了npm install --save-dev @babel/preset-env 依赖
- 然后根目录下新增了一个babel.config.js文件，里面放了一些babel的配置。如下：
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }] // 如果使用装饰器
]
};
- 此时我的相关依赖如下：
"devDependencies": {
"@babel/core": "^7.27.4",
"@babel/plugin-proposal-decorators": "^7.27.1",
"@babel/preset-env": "^7.27.2",
"babel-loader": "^10.0.0",
}
打包发布
1. 配置webpack的打包发布
- 在package.json文件中的scripts节点下，新增build命令：“build”: “webpack --mode=production”
- –mode是一个参数项。用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化
- 注意： 通过-- model指定的参数项，会覆盖webpack.config.js中的model选项
2. 生成的JavaScript文件统一放在js文件中
在webpack.config.js配置文件中的output节点，进行如下配置
output: {
path: path.join(__dirname, "./dist"), // 输出文件的存放路径
filename: 'js/bundle.js' // 输出文件的名称
},
2. 把图片文件统一生成到image文件中
在webpack.config.js配置文件中的url-loader配置项，新增outputPath选项，进行如下配置
output: {
path: path.join(__dirname, "./dist"), // 输出文件的存放路径
filename: 'js/bundle.js' // 输出文件的名称
},
3.自动清理dist目录下的旧文件
- 为了在每次打包发布时自动清理dist目录下的旧文件，可以安装并配置clean-webpack-plugin插件
<!--安装指令-->
npm install --save -dev clean-webpack-plugin@latest
<!--注意：构造函数名称必须是CleanWebpackPlugin-->
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 可选：指定自定义模板
// 如果不指定模板，插件会生成默认 HTML
filename: './index.html'
}),
cleanPlugin
],
Source Map
什么是Source Map？
- Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。
- 有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
- 配置就是给webpack.confih.js加一个与mode平级的devtool: ‘eval-source-map’
- 注意：为了安全性我们在开发环境中记得不要去配置devtool，或者使用devtool: ‘nosources-source-map’，只定位错误发生的行数，不暴露源码
webpack中的@应用
webpack.confih.js中增加如下配置
resolve: {
alias: {
'@': path.join(__dirname, './src/')
}
}
错误类型与解决
Uncaught SyntaxError: Cannot use import statement outside a moduleSyntaxError：语法错误
Module parse failed： Unexpected token
You may need an appropriate loader to handle this file type 你需要一个合适的loader来处理这个文件类型
源码我放在了这里
克隆该仓库的 webpack_review_demo 分支：
git clone -b webpack_review_demo https://github.com/bk199610/PersonalBlogNotes.git
或者直接点击源码压缩包下载
扫一扫
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
