Webpack5随笔

webpack5

asset module type 资源模块类型 可以代替file-loader 、url-loader

webpack常用的loader

less-loader

css-loader

style-loader

postcss-loader

file-loader 可打包iconfont

url-loader 可转base64

常用plugin

clean-webpack-plugin 删除文件夹

html-webpack-plugin 生产html文件

copy-webpack-plugin 复制public文件夹

配置babel

bable-core

babel-loader presets

.babel.config.json配置文件

babel 执行阶段:解析parseing 转换transformation 代码生成Code Generation 目标源代码

环境

mode:‘development’和’production’

分离

建config文件夹

指定文件

“scripts”:{
	build:'webpack --config ./config/webpack.prod.config.js',
    serve:'webpack serve --config ./config/webpack.dev.config.js'
}

最后一个公共的config用webpack-merge

设置sourcemap

devtool:'source-map'

出口入口

entry

entry:'./src/main.js'

output

const path = require('path')
output:{
    path:path.resolve(__dirname,"./build"),
    filename:'js/bundle.js'
}

打包单文件

vue-loader@next

@vue/compiler-sfc

const { VueLoaderPlugin } = require('vue-loader/dist/index')

两个标识

设置options api :

new DefinPlugin(
	{
        __VUE_OPTIONS_API__:true,
        __VUE_PROD_DEVTOOLS__:false
    }
)

webpack-dev-server

将bundle文件保存到了内存里

事实上使用了一个库memfs(memory-fs webpack自己写的)

HMR热模加载

target:'web',
dvServer:{
	contentBase:'./public',
	hot:true,
    host:'0.0.0.0',//可以让别的电脑看到自己电脑
    port:'7777',
    open:true,
    compress:true,//gzip格式压缩 -- Content-Encoding:gzip
    proxy:{
        secure:false,
        changeOrigin:true
    }
}
if(module.hot){
	module.hot.accept('./js/element.js',()=>{
		console.log('element模板热更新了')
	})
}

解决方案:

vue-loader

react-refresh (react-hot-loader已经被弃用了)

原理:

WDS创建两个服务:提供静态资源的服务expresssocket服务

historyApiFallback

resolve

基于enhence-resolve来解析文件路径

resolve:{
	modules:['node_modules'],
    extensions:['.js','.json'],
    alias:{
        '@':path.resolve(__dirname,"./src")
    }
}

Vite

基于ESBuild、更快
ESBuild由go编写、直接转为机器码

预打包等

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将webpack更新到webpack5,你可以按照以下步骤进行操作: 1. 首先,确保你的项目已经安装了webpack4,并且项目中的webpack相关的依赖包已经经过优化。 2. 在开始升级之前,你需要了解webpack5的新特性和改动,以便确定是否会对你的项目产生影响。你可以查阅webpack5的官方文档,了解新版本的改进。 3. 接下来,你可以通过以下几个步骤来升级webpack: a. 首先,升级webpack的主要依赖包。你可以修改项目的package.json文件,将webpack相关的依赖包的版本号修改为webpack5对应的版本号。 b. 然后,运行npm install命令来安装新版本的依赖包。 c. 接下来,你需要根据你的项目需求和配置,逐步迁移你的webpack配置文件。由于webpack5引入了一些新的配置项和改动,你需要根据官方文档和你的项目需求,逐步修改和调整配置文件,以确保项目可以正常运行。 d. 最后,你可以运行项目,并进行测试和调试,以确保项目在升级到webpack5之后可以正常工作。 4. 在升级过程中,你可能会遇到一些兼容性问题或者其他异常情况。在这种情况下,你可以通过查阅webpack的官方文档、搜索相关的社区讨论或者咨询其他开发者的经验来解决问题。 总结起来,将webpack更新到webpack5的过程主要包括了解新版本的改进、升级依赖包、迁移配置文件和测试调试等步骤。希望这些步骤能帮助你成功地将webpack更新到webpack5,并实现项目的优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值