webpack
文章平均质量分 73
webpack踩坑以及性能优化
sleeppingfrog
一抹斜阳,一手江湖
展开
-
关于项目安装报错的一些问题归类
1 react 项目启动报错Html Webpack Plugin: Error: Child compilation failed: Module.createRequire is not a function - child-compiler.js:169 childCompiler.runAsChild [prettie]/[html-webpack-plugin]/lib/child-compiler.js:169:18 - Compiler.js:55.原创 2022-05-20 10:56:50 · 941 阅读 · 0 评论 -
webpack配置实现项目开发,测试和生产等环境配置
这篇文章,将一步一步慢慢让我们熟悉通过webpack自己手动配置dev.prod.test等各种环境。webpack版本基于4.0+(目前webpack是5+)如果在运行过程中出现报错,请参考案例中的webpack三件套版本第一步,我们要实现一个最简单的功能。(1)通过运行npm run dev可以实现保存时热更新代码。(2)通过运行 npm run build 可以实现打包第一个功能的时候我们要借助wenpack-dev-server,第二个功能则需要借助webpack提供的打包命令原创 2020-11-02 11:40:57 · 1367 阅读 · 0 评论 -
webpck踩坑记录
1 启用webpack-dev-server需要注意版本问题:已知正常运行版本"webpack": "4.44.2","webpack-cli": "3.3.5","webpack-dev-server": "^3.1.4"2 webpack-dev-server如何配置呢?解决办法:我们需要在webpack.config.js文件中作如下设置: devServer:{ contentBase:path.join(__dirname,"dist"), compres...原创 2020-11-01 21:34:12 · 144 阅读 · 0 评论 -
react配置webpack-bundle-analyzer项目优化踩坑
webpack-bundle-analyzer是一款神奇。能分析项目中依赖包的大小,从而让开发者能有针对性的进行优化。步骤:(1)安装 cnpm iwebpack-bundle-analyzer --save-dev (2) 在config文件夹中找到webpack.config.js,进行如下操作特别注意这里newBundleAnalyzerPlugin的时候要找准位置;和module参数同级的plugins;[]才是配置plugin的地方这样我们在npm run ....原创 2020-08-22 14:06:02 · 4152 阅读 · 1 评论 -
webpack 如何压缩项目体积提交首页渲染速度?
单页面应用首屏渲染加载速度很慢。如何压缩项目体积减少从而实现更快的实现首屏响应速度?今天要实现的办法就是提供cdn+webpakck来实现。实例以我自己的项目为例。第一步: 在build文件夹下找到webpack.base.config.js文件。添加externals属性:代码如下: module.exports = { context: path.resolv...原创 2018-10-29 14:43:42 · 640 阅读 · 0 评论