webpack - 随笔分类 - 人生之外的路途

代码分割和动态import

摘要：代码分割和动态import 意义对于大的Web应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被用到。webpack有一个功能就是将你的代码分割成chunks（语块），当代码运行到需要它们的时候再加载。适用的场景：抽离相同的代码到一个共享块阅读全文

posted @ 2021-08-09 21:12 人生之外的路途阅读(256) 评论(0) 推荐(1)

文件打包

posted @ 2021-08-09 21:08 人生之外的路途阅读(66) 评论(0) 推荐(0)

webpack 常见配置

摘要：常见配置自动添加前缀效果代码： display:flex; 打包后的效果： display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; 相关插件使用插件postcss-loader autopre 阅读全文

posted @ 2021-08-09 21:07 人生之外的路途阅读(85) 评论(0) 推荐(0)

多页面打包

摘要：多页面打包动态获取entry和设置html-webpack-plugin数量利用glob库获取文件目录修改文件路径一个页面在src下单独创建一个页面文件夹，然后里面放index.js和index.html src index index.js index.html shop index.js 阅读全文

posted @ 2021-08-09 21:06 人生之外的路途阅读(101) 评论(0) 推荐(0)

Source map

摘要：Source map 使用source map 作用：通过Source map定位到源代码科普文章：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 开发环境开启，线上环境关闭线上排除问题的时候可以将Source 阅读全文

posted @ 2021-08-09 21:05 人生之外的路途阅读(193) 评论(0) 推荐(0)

webpack 提取页面公共资源

摘要：提取页面公共资源基础库分离思路：将react、react-dom基础包通过cdn引入，不打入最终代码中方法：使用html-webpack-externals-plugin 使用： const HtmlWebpackExternalsPlugin = require("html-webpack- 阅读全文

posted @ 2021-08-09 21:04 人生之外的路途阅读(183) 评论(0) 推荐(0)

webpack 摇树优化(tree shaking)

摘要：摇树优化(tree shaking) 概念一个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打包到目标文件中去，tree shaking就是只把用到的方法打入目标文件，没有用到的部分在uglify(文件压缩)阶段抹除掉使用 webpack默认支持，在.babelrc里设置mou 阅读全文

posted @ 2021-08-09 21:03 人生之外的路途阅读(363) 评论(0) 推荐(0)

webpack发布组件

摘要：发布组件指令集合切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org 切换到npm镜像 npm config set registry https://registry.npmjs.org/ 查看镜像地址 npm conf 阅读全文

posted @ 2021-08-09 21:01 人生之外的路途阅读(148) 评论(0) 推荐(0)

webpack基础配置

摘要：基础配置【mode】：模式，开发模式 ,生产模式【watch】：是否启用文件监听，自动打包，默认为false，只有设置为true了，watchOptions才有意义【watchOptions】：开启监听后的设置【entry】：入口【output】：输出【module】：rules 【pl 阅读全文

posted @ 2021-07-31 20:57 人生之外的路途阅读(92) 评论(0) 推荐(0)

随笔分类 - webpack