![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 66
饱饱~~
这个作者很懒,什么都没留下…
展开
-
webpack 拆分开发环境和生产环境配置-10
现在只能手工来调整 mode 选项,实现了生产环境和开发环境的切换,并且很多配置在生产环境和开发环境中是存在不一致的情况的,比如开发环境没有必要设置缓存,生产环境还需要设置公共路径等。10.1 公共路径publicPath 配置选项在各种场景中都非常有用,可以通过它来指定应用程序中所有资源的基础路径基于环境设置dist 文件夹内的 app.html 引入文件是绝对路径新增 webpack 配置:// 出口文件output: { publicPath: 'http://l原创 2022-03-13 17:51:53 · 1499 阅读 · 0 评论 -
webpack 缓存-09
使用 webpack 打包会生成 dist 文件夹,把 dist 文件夹的内容部署到服务器上,通常浏览器可以访问服务器上的网站和资源,最后一步获取资源是比较费时间的,所以浏览器会使用一个叫“缓存”的技术,可以通过命中缓存以降低网络流量,使网站速度加载更快。在部署新版本的时候,不更改资源文件名,浏览器会默认没有缓存,这时候会使用它的缓存版本,由于缓存的额存在,获取新的代码的时候有些棘手,可以通过一些设置来确保 webpack 编译生成的文件能够被客户端缓存,在文件内容发生变化的时候,又能够请求到新的文件9原创 2022-03-12 23:06:13 · 1327 阅读 · 0 评论 -
webpack 代码分离-08
代码分离是webpack最引人注目的特性之一,能够把不同的代码分离到不同的 bundle 中,所谓 bundle,就是我们打包分离出来的文件,然后我们把这些文件按需加载或者并行加载,代码分离可以用于获取更小的 bundle,以及控制资源加载的优先级,如果使用合理,会极大的影响加载时间。常用的代码分离方法:1、入口节点:使用 entry 配置手动地分离代码问题:如果有多个入口,那么这些多个入口共享的文件会分别在每个包里边去重复打包迄今为止最简单直观的分离代码的方式,不过,这种方...原创 2022-03-12 22:35:54 · 951 阅读 · 0 评论 -
webpack babel-loader插件-07
webpack 自带加载 js 模块的功能,但是他只能做 js 模块化的打包,并不能转化 js 里的代码,比如将 ES6 转化成 ES5,那有时候我们的代码还能正常运行,纯靠浏览器来解析,如果浏览器版本比较低的话,运行的时候可能会发生错误,所以,要使用 babel 将代码进行转化安装: npm install babel-loader @babel/core @babel/preset-env-Dbabel-loader:在 webpack里应用babel解析ES6的桥梁@ba...原创 2022-03-12 22:35:02 · 372 阅读 · 0 评论 -
webpack 管理资源-06
1、什么是loader?webpack 只能理解 js 和 json 文件,loader 可以让webpack解析其他资源类型的文件,并且将这些文件转换为有效的模块2、加载css需要安装 style-loader 和 css-loader,并在module中配置中添加这些 loader切换到项目根目录,安装npm install css-loader -D,npm install style-loader -D(把css放置到页面上)配置webpack.config.js文件m..原创 2022-03-11 13:29:29 · 106 阅读 · 0 评论 -
webpack 资源模块-05
在index.js 中引入图片在 webpack.config.js文件中添加配置module: { rules: [ { test: /\.png$/, type: 'asset/resource' } ] }终端执行:npx webpack,生成dist文件夹执行:npx webpack-dev-server,打开地址,图片原创 2022-03-09 22:55:35 · 427 阅读 · 0 评论 -
自定义 webpack 安装与配置-02
在项目根目录下创建 webpack.config.js文件在该文件内进行配置// 引入绝对路径模块const path = require('path')module.exports = { // 入口文件 entry: './src/index.js', // 出口文件 output: { // 指定输出文件的文件名 filename: 'bundle.js', // 文件的输出路径,要设置绝对路径原创 2022-03-09 20:02:16 · 152 阅读 · 0 评论 -
webpack 执行 npx webpack-dev-server 报错 static heartbeatInterval = 1000
使用 npx webpack-dev-server打包的时候报错最后发现是因为我安装的node版本 过低解决方法:安装高版本nodewebpack-dev-server v4.0.0+ 要求 node版本必须 >= v12.13.0,webpack >= v4.37.0...原创 2022-03-09 21:18:01 · 111 阅读 · 0 评论 -
webpack踩坑~
全局安装 webpack 后,查看版本号,显示 CLI for webpack must be installed.输完 yes 仍然报错webpack 安装完需要安装 webpack -cli全局安装 webpack -cli:npm i -g webpack -cli最后结果:webpack: 5.69.1webpack-cli: 4.9.2webpack-dev-server not installed...原创 2022-03-03 11:01:02 · 1354 阅读 · 0 评论