![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 82
Goat恶霸詹姆斯
本是后山人,偶作前堂客
展开
-
使用Webpack5搭建项目
当项目越来越大时,打包速度越来越慢,我们想要提升打包速度,其实还是要提升js的打包速度,对于js文件处理,我们主要使用,eslint,babel,terser,所以我们要提升运行速度,关于terser,在生产环境下webapck会自动激活这个插件并且压缩js代码,我们没有配置过,所以我们看不见。如果我们只要渲染首页,就应该只加载首页的js文件,其他文件不应该加载,所以我们需要将打包生成的文件进行代码分割,生成多个js文件,这样加载的资源就越少,速度越快。原创 2023-04-22 22:27:49 · 603 阅读 · 0 评论 -
webpack优化
使用code split 对代码进行分割成多个js文件,从而使单个文件体积更小,并行加载js更快,并通过import动态导入语法进行按需加载,东二达到使用时加载该资源,不用时不加载资源。使用@babel/plugin-transform-runtime 插件对babel进行处理,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。使用Preload/prefetch对代码进行提前加载,等未来需要使用时就能直接使用,从而用户体验更好,但是存在兼容性的问题,看情况使用。原创 2023-04-23 22:01:41 · 407 阅读 · 0 评论 -
使用Webpack5搭建项目(react篇)
检测HMR热更新,样式文件是可以触发,但是js文件依旧不行,所以引用插件,react-refresh-webpack-plugin。页面重新启动即可,但是刷新页面会有404的问题,解决方案:historyApiFallback,配置webapck.dev.js。在引入的时候我们没有这里是对js文件有自动补全的功能,但这里是jsx文件,所以继续配置webpack.dev.js。新建项目,生成package.json文件,创建config文件夹,创建webpack.dev.js文件。原创 2023-04-26 23:29:51 · 1349 阅读 · 0 评论 -
使用Webpack5搭建项目(vue篇)
修改和优化webpack.prod.js,修改只处理js文件,添加vue-loader,修改devtool,修改文件补充的拓展。由于大部分配置一样,我们从上一篇react项目中,复制webpack.dev.js以及webpack.prod.js。复制webpack.prod.js为webpack.config.js。2.自动补充拓展名修改为.vue文件,同时处理js文件,不是jsx。修改webpack.config.js文件。配置webpack.config.js。新建配置babel.config.js。原创 2023-04-29 22:24:56 · 1019 阅读 · 0 评论 -
webpack loader原理以及自定义loader
表示跳过pre和normal和post loader,即使在module里配置了style-loader,css-loader,如是pre或normal或post类型的,也不会执行的。:表示跳过pre和normal loader,即使在module里配置了style-loader,css-loader,如是pre或normal类型的,也不会执行的。:表示跳过normal loader,即使在module里配置了style-loader,css-loader,如是normal类型的,也不会执行的。原创 2023-05-02 18:25:17 · 380 阅读 · 0 评论 -
webpack plugin原理以及自定义plugin
对象中保存着完整的webpack环境配置,每次启动webpack构件时,都只创建一次的对象,我们可以通过compiler获取到ebpack的主环境配置,比如:loader,plugin等。代码角度来说:webpack在编译的过程中,会触发一系列的tapable钩子事件,插件要做的就是找到对应的钩子,往上面挂自己的任务,也就是注册事件,webpack在构建的时候,就会一起触发注册的事件。点击下一个断点,就是我们的debugger的地方,可以看到compiler的内容,当然也包括compilation。原创 2023-05-03 21:59:49 · 1131 阅读 · 0 评论