【webpack】高级2

1.preload/prefetch
前面的按需加载会提升加载速度,但是如果被拆分出来的包体积很大,那么这么按需加载的包,再加载时会很慢。
所以有种策略就是,当浏览器空闲的时候,开始加载按需加载的这些包
在这里插入图片描述
下载
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
但是perload/prefetch会存在兼容性问题,需要考虑
2.
如果某个文件a依赖另一个文件b,当b文件发生变化会重新打包,包名种的hash值会发生变化。此时a文件种对b文件的引入也会发生变化,会误认为a文件也发生了变化,所以a文件也会重新打包,显然是我们不想要的
在这里插入图片描述
在这里插入图片描述
3.js语法兼容性处理core-js
在这里插入图片描述
使用方法:
1.全部引入
在main.js中
import ‘core-js’
2.按需引入
假如只用了一个promise语法,但是全部引入就会把core-js库的所有文件都引入,会使打包体积变很大,所以推荐采取按需引入
在这里插入图片描述
3.自动按需引入
在这里插入图片描述
4.pwa
在这里插入图片描述
使用步骤,install 引入并配置,在main.js中注册
缺点:兼容性比较差
在这里插入图片描述
自带的hmr做不了js文件的热模块替换,所以需要使用其他插件帮助实现
在这里插入图片描述

在这里插入图片描述

样式的hmr通过css-loader做到的
js的hmr需要插件实现
在这里插入图片描述
copy-webpack-plugin
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它是一个模块打包工具,可以将多个模块打包成一个文件,以便在浏览器中使用。Webpack 可以处理 JavaScript、CSS、图片等多种资源,并且可以通过插件机制进行扩展。 对于高级前端开发人员来说,掌握 Webpack 是非常重要的。以下是一些关于 Webpack 的常见问题和答案: 1. Webpack 的主要功能是什么? Webpack 的主要功能是将多个模块打包成一个或多个文件,以便在浏览器中使用。它可以处理 JavaScript、CSS、图片等多种资源,并且可以通过插件机制进行扩展。 2. 如何安装 Webpack? 可以使用 npm 安装 Webpack。在命令行中运行以下命令即可: ``` npm install webpack --save-dev ``` 3. 如何配置 WebpackWebpack 的配置文件是一个 JavaScript 文件,通常命名为 webpack.config.js。在配置文件中,可以指定入口文件、输出文件、加载器、插件等信息。以下是一个简单的 Webpack 配置文件示例: ```javascript module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 4. Webpack 的加载器是什么? Webpack 的加载器是用于处理各种类型的文件的工具。例如,可以使用 babel-loader 处理 ES6 代码,使用 css-loader 处理 CSS 文件,使用 file-loader 处理图片等。 5. Webpack 的插件是什么? Webpack 的插件是用于扩展 Webpack 功能的工具。例如,可以使用 HtmlWebpackPlugin 插件生成 HTML 文件,使用 UglifyJsPlugin 插件压缩 JavaScript 代码等。 6. 如何在 Webpack 中使用 ES6 模块? Webpack 默认支持 ES6 模块。可以在入口文件中使用 import 和 export 关键字来导入和导出模块。 7. 如何在 Webpack 中使用 CSS? 可以使用 css-loader 和 style-loader 来处理 CSS 文件。css-loader 用于加载 CSS 文件,style-loader 用于将 CSS 插入到 HTML 页面中。 8. 如何在 Webpack 中使用图片? 可以使用 file-loader 或 url-loader 来处理图片。file-loader 可以将图片复制到输出目录中,url-loader 可以将图片转换为 base64 编码并嵌入到 JavaScript 文件中。 9. 如何在 Webpack 中使用 React? 可以使用 babel-loader 来处理 JSX 语法,并使用 react-hot-loader 实现热更新。以下是一个简单的 Webpack 配置文件示例: ```javascript module.exports = { entry: [ 'react-hot-loader/patch', './src/index.js' ], output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true } }; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值