webpack
文章平均质量分 85
个人的webpack学习记录!
庞囧
主业是一个纯前端打字员,生活与工作的平衡点是我的追求。
展开
-
【webpack】一些零碎的知识点记录:eslint配置、source-map配置、devServer配置
有些知识点不知道咋归类,就先暂时放在同一个文章里了。这里只记录配置方式,配置的东西是什么就不过多解释了,因为一般需要配置这些东西的也都了解是什么了。原创 2023-08-05 17:34:07 · 732 阅读 · 0 评论 -
【webpack】7-针对不同场景的性能优化方案
文章目录压缩配置压缩配置用到的是之前说过的插件:HtmlWebpackPlugin。const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: { // 压缩配置 collapseWhitespace: true, // 移除空格原创 2021-09-04 16:29:50 · 210 阅读 · 0 评论 -
【webpack】6-将webpack配置拆分成公共、开发、生产单独的文件配置
文章目录概念安装配置启动概念作用就是用来自动化的,例如自动编译、自动打开浏览器,自动刷新浏览器等等。只会在内存中编译打包,不会有任何输出,也就是没有打包到硬盘中。安装npm i webpack-dev-server -D配置module.exports = { devServer: { contentBase: resolve(__dirname, 'build'), // 目标文件 compress: true, // 启动gzip压缩,让打包的体积更小 port: 3000原创 2021-08-29 16:57:04 · 623 阅读 · 0 评论 -
【webpack】5-如何解析html文件、图片等其他资源
文章目录eslint安装配置设置规则babel全兼容polyfill安装使用缺点corejs安装配置注意eslint安装npm i eslint-loader eslint -D同时还需要一个代码规范库:airbub,我们选择不包含react规范的eslint-config-airbub-base,这个库也需要另外的插件支持eslint-plugin-import。npm i eslint-config-airbub-base eslint-plugin-import -D配置const原创 2021-09-01 21:52:01 · 634 阅读 · 0 评论 -
【webpack】4-如何解析CSS、LESS等预处理器以及一些优化处理,提取单独文文件、兼容处理postcss,压缩
更好的缓存,当 CSS 和 JS 分开时,浏览器可以缓存 CSS 文件并重复使用,而不必重新加载,也不用因为js内容的变化,导致css缓存失效。更快的渲染速度,浏览器是同时可以并行加载多个静态资源,当我们将css从js中抽离出来时,能够加快js的加载与解析速度,最终加快页面的渲染速度。主要用于加载css文件,例如在main.js中引入css文件,没有css-loader的webpack是不认识的。每个浏览器对一些css属性的支持情况是不一样的,需要一个postcss库的帮助,去针对性的对每个浏览器做兼容。原创 2021-08-29 21:02:50 · 639 阅读 · 0 评论 -
【webpack】3-如何让webpack能够通过babel解析JS高级语法,以及什么是polyfill、corejs,规范eslint
很多浏览器的内核比较老,一些es6以上的语法无法在他们上面运行,所以需要babel进行降级,转译成es5。原创 2021-08-21 20:32:52 · 1691 阅读 · 2 评论 -
【webpack】2-基本概念entry、output、loaders、plugins、mode
文章目录entry用法output用法loaders常用loaders用法plugins常用plugins用法modeentry用来指定webpack的打包入口用法单入口:module.exports = { entry: './src/main.js' // 字符串}多入口:module.exports = { entry: { // 对象 app: './src/main.js', login: './src/login.js' }}output用来告诉webp原创 2021-08-21 17:32:36 · 330 阅读 · 0 评论 -
【webpack】1-认识并体验webpack,拒绝做cli工程师
文章目录概念安装体验JS打包css打包尾巴概念直接上官网的一张图将多个文件打包成一个,例如上图的静态文件、js、css等。给打包的文件做加密。已被集成在vue2中。工作环境在node.js。安装npm i -g webpack webpack-cli查看版本webpack -v体验不用说先初始化一个node项目npm init -yJS打包创建src文件夹,里面放一个主入口文件main.js和两个要引入进主入口文件的js文件,例如a.js与b.js:a:func原创 2021-05-03 17:52:53 · 167 阅读 · 0 评论