![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack、 esline 、 代码规范
文章平均质量分 77
webpack 学习知识点
胖鹅68
熟悉h5,jquery,css2/3,angular,ionic,springMVC,hibernate,spring,struts,mybatis,mysql,oracle,linux,android等技术
了解openfire开源系统,熟悉openfire的IM功能
展开
-
reverse-sourcemap反编译webpack打包的.map类型文件
文章目录一、文章参考二、问题描述三、快速入门3.1 安装3.2 案例一、文章参考reverse-sourcemap npmJavaScript Source Map 详解二、问题描述工作中,遇到了一个前同事开发的一个项目,打包之后已经发布了,但是,在使用后期发现需要修改源码,有些需求不满足,结果发现同事没有将代码提交到SVN ,导致找不到源码于是在网上找到了 reverse-sourcemap 工具,可以将.js.map文件转为源码,然后基于反编译的文件再做修改三、快速入门3.1 安装原创 2022-03-14 16:23:25 · 10668 阅读 · 0 评论 -
webpack require.context()学习笔记
require.context()一、参考webpack require.context加快Vue项目的开发速度二、问题描述如果需要这样引入文件import A from 'components/A'import B from 'components/B'import C from 'components/C'import D from 'components/D'// ...每一个引入就很麻烦,但是有规律——在同一个文件夹下面,那么,是否可以通过代码批量引入处理?三、req原创 2021-09-28 10:13:13 · 498 阅读 · 0 评论 -
react+eslint+Prettier+escode配置(react编码风格统一)
参考Setup ESLint for React with Prettier, pre-commit and VSCodevscode中eslint不生效原因在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范react eslint自动修复_ESlint+Prettier+EditorConfig+VScode问题描述最近做了一个react项目,起初忙于开发,也没有考虑到eslint和pretty的代码规范,代码比较随意,后面回头看自己的代码,相当不舒原创 2021-05-25 10:34:56 · 1325 阅读 · 2 评论 -
vscode 配置nodejs项目的eslint
https://hbiao68.blog.csdn.net/article/details/104070149package.json“babel-eslint”: “^10.1.0”,“eslint”: “^7.9.0”,“eslint-config-airbnb-base”: “^14.2.0”,“eslint-plugin-html”: “^6.1.0”,“eslint-plugin-import”: “^2.22.0”,“eslint-friendly-formatter”: “^4.原创 2020-09-14 09:29:34 · 2200 阅读 · 0 评论 -
eslint 全局变量检查配置设置
文章目录文章参考问题描述解决办法配置运行环境文章参考ESlint 使用总结问题描述在工作中,想开发一个百度地图,但是使用bmap的时候,vscode 就会一直提示代码异常,原因是不识别bmap这个对象,eslint 验证不通过,让人开发很不舒服解决办法package.json 中配置 eslintConfig.globals"eslintConfig": { "root": true, "env": { "node": true }, "extends": [原创 2021-02-05 12:25:06 · 3164 阅读 · 0 评论 -
批处理跳转到指定目录,启动webpack工程
文章目录文章参考问题描述解决思路代码实现案例——启动nginx案例——启动vue文章参考如何利用批处理启动cmd并进入指定目录dos批处理学习10集视频 轻松学会批处理命令的使用问题描述每次在做前端开发的时候,就需要打开DOS窗口,跳转到指定的目录,然后执行webpack的启动命令,很麻烦,因此想找个鼠标双击的解决办法启动webpack打包功能,提高开发效率,于是想到了批处理解决思...原创 2020-04-10 23:12:46 · 518 阅读 · 0 评论 -
webpack HappyPack多个进程处理loader
文章目录文章参考什么是HappyPack? 作用是什么?HappyPack的基本原理?使用案例安装依赖库webpack.config.js 配置如何使用 happypack配置说明webpack配置问题:HappyPack: plugin for the loader '1' could not be found?文章参考roadhog 构建优化深入浅出的webpack构建工具—Happy...原创 2020-02-13 00:19:19 · 2566 阅读 · 0 评论 -
webpack js压缩插件UglifyJS、ParallelUglifyPlugin.md
文章目录文章参考UglifyJS 作用webpack.optimize.UglifyJsPlugin has been removed, please use config.optimizat?webpack4.x 配置 uglifyjs-webpack-pluginmode 对 UglifyJSPlugin的影响ParallelUglifyPlugin为什么要使用 ParallelUglifyP...原创 2020-02-12 17:50:19 · 4420 阅读 · 0 评论 -
22.webpack react 配置入门
安装依赖库cnpm install react react-dom --savecnpm install -D @babel/core @babel/preset-env @babel/preset-react babel-loaderPlugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法?...原创 2020-02-03 23:46:35 · 213 阅读 · 0 评论 -
21.webpack @babel-preset-env 与 babel-preset-es2015 的区别
文章参考babel-preset-es2015 -> babel-preset-envbabel-preset-envbabel-preset-env:一个帮你配置babel的presetbabel-preset-env 的作用官方解释If you are using Babel version 7 you will need to run npm install @bab...原创 2020-02-03 23:38:18 · 4191 阅读 · 0 评论 -
20.webpack4.x 代码分割code spliting和代码懒加载
文章目录为什么要使用“代码分割”(code-spliting)代码分割两种同步代码,在webpack.config.js中optimization中配置异步代码,无需做任何配置代码分割与webpack无关为什么要使用“代码分割”(code-spliting)webpack打包默认是将所有的文件合并为一个文件,如果打包的文件比较大,比如是10M,则需要下载10M代码之后,然后解析完代码才...原创 2020-02-01 00:48:57 · 618 阅读 · 0 评论 -
webpack debugger调试
文章目录问题描述解决办法vscode debugger 调试问题描述在写webpack配置文件的时候,想了解一些变量的详情,因此,需要debugger调试nodejs解决办法Nodejs 使用 Chrome DevTools 调试 --inspect-brk"debugger": "node --inspect --inspect-brk build/server.js --open"...原创 2020-01-31 22:11:27 · 2203 阅读 · 1 评论 -
19.webpack webpack-dev-middleware和webpack-dev-server区别
文章目录文章参考什么是webpack-dev-middlewarewebpack明明可以用watch mode,可以实现一样的效果,但是为什么还需要这个中间件呢?webpack-dev-server解决的问题webpack-dev-middleware 与 webpack-dev-server 关系HMR和热加载的区别?webpack-dev-middleware 安装基本使用模板扩展expres...原创 2020-01-30 16:12:23 · 1176 阅读 · 0 评论 -
18.webpack babel-polyfill @babel-runtime @babel-runtime-corejs2关系 学习整理
文章目录问题描述stage-0 表示的是什么呢?babel polyfill 有三种几个包的包含关系?babel-polyfill vs babel-runtime vs babel-plugin-transform-runtime原理说明作用范围优缺点runtime transformer plugin做3件事:transform-runtime在`.babelrc`文件中的配置说明babel-...原创 2020-01-28 16:52:40 · 3432 阅读 · 0 评论 -
17.webpack 全局上下文中执行一次 JS 脚本(script-loader)
文章目录文章参考功能说明安装webpack.config.js 配置案例文章参考script-loader功能说明在全局上下文中执行一次 JS 脚本。安装cnpm install --save-dev script-loaderwebpack.config.js 配置module.exports = { module: { rules: [ { ...原创 2020-01-27 21:23:02 · 4106 阅读 · 0 评论 -
16.webpack typescript环境搭建
文章目录文章参考安装依赖库webpack.config.js 配置解析 ts或者 tsx 类型文件添加 `tsconfig.json` 配置文件files 支持glob通配符测试 typescript 文件文章参考typescript基础教程typescript-handbook 安装依赖库cnpm install ts-loader --save-devcnpm install ...原创 2020-01-27 17:48:01 · 556 阅读 · 0 评论 -
16 vue2.x 搭建vue-router
文章目录安装Vue-router 依赖包案例说明compiler(模板)模式和runtime模式 ?参考开发为了方便,使用 runtime-compiler 模式的方式?安装Vue-router 依赖包npm install vue-router案例说明配置路由// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)imp...原创 2020-01-22 20:55:39 · 312 阅读 · 0 评论 -
15. webpack配置 vue-loader,解析vue文件
文章目录安装 vue 文件相关的loaderwebpack关于Vue相关的配置定义main.js启动文件,加载App.vue文件安装 vue 文件相关的loadercnpm install -D vue-loader vue-template-compilercnpm install -D vuewebpack关于Vue相关的配置// webpack.config.jsconst V...原创 2020-01-22 20:52:51 · 1175 阅读 · 0 评论 -
14.webpack4.x eslint配置
文章目录文章参考安装在vue项目中,.vue文件中的 script标签内的代码,eslint 是无法识别的,这时就需要使用插件: eslint-plugin-html规定报错时输入的信息格式Javascript Standard Style (https://standardjs.com) 此处是js一些书写规范的标准集合,根据该集合我们可以配置eslint帮助我们检查代码规范eslint-plu...原创 2020-01-22 15:10:12 · 834 阅读 · 0 评论 -
13. webpack4.x babel配置——babel-loader
文章目录文章参考什么是babel如何安装babel.babelrc babel的配置文件Plugin/Preset files are not allowed to export objects,only functions.webpack报错/babel报错的解决办法?解决办法webpack.config.js 配置 babel-loader让浏览器支持新标准的函数 polyfill缺点:增大了...原创 2020-01-22 15:08:47 · 1456 阅读 · 0 评论 -
12.webpack4.x 拷贝指令文件插件CopyWebpackPlugin
文章目录文章参考安装应用场景参数说明webpack.config.js 配置信息文章参考CopyWebpackPlugin 中文文档安装npm install --save-dev copy-webpack-plugin应用场景将一些资源(不需要file-loader处理的)拷贝到指定目录,例如static的静态资源参数说明属性功能描述参数说明from...原创 2020-01-21 16:44:16 · 1197 阅读 · 0 评论 -
11 webpack4.x resolve路径别名、文件扩展名、第三方库目录设置
文章目录文章参考Resolve 配置说明webpack.config.js 配置绝对路径 aliaswebpack.config.js 配置第三方模块加载路径 modules设置默认后缀文件文章参考webpack学习笔记–配置resolvewebpack resolve 配置说明Resolve 配置说明Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve...原创 2020-01-21 16:43:11 · 1094 阅读 · 0 评论 -
10 webpack4.x 文件资源(图片、字体)打包file-loader 和 url-loader
文章目录文章参考file-loader应用场景安装案例 —— 引入字体库的配置url-loader安装案例——图片打包file-loader 与 url-loader 的区别?file-loaderurl-loader相同点关系webpack打包html里面img后src为“[object Module]”问题?文章参考url-loader githubfile-loader官方解释...原创 2020-01-21 16:42:07 · 1229 阅读 · 1 评论 -
9.webpack Css抽取和压缩mini-css-extract-plugin和optimize-css-assets-webpack-plugin
文章目录作用与 extract-text-webpack-plugin对比安装参数描述案例作用将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap与 extract-text-webpack-plugin对比异步加载不重复编译,性能更好更容易使用只针对CSS缺点:目前缺失功能,HMR。不支持 热更新安装np...原创 2020-01-21 16:40:54 · 1397 阅读 · 0 评论 -
8. webpack css 打包(css-loader style-loader sass-loader)
文章目录css-loaderstyle-loadersass-loaderwebpack.config.js 配置css 模块引入背景图片或者字体文件库,需要引入 file-loader 或者 url-loadercss-loadercss-loader 解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码npm install --save-dev css-loade...原创 2020-01-21 16:39:33 · 2020 阅读 · 0 评论 -
7. webpack 自定义插件
文章目录文章参考个人理解插件的作用自定义插件创建一个自定义插件类Compiler 和 Compilationcompiler 对象代表了完整的 webpack 环境配置。compilation 对象代表了一次资源版本构建。vue.config.js 如何引用自定义插件异步编译插件插件的不同类型同步(synchronous) Tapable 实例应用插件时会使用:瀑布流(waterfall) 插件应...原创 2020-01-20 18:04:16 · 922 阅读 · 0 评论 -
6. webpack.DefinePlugin插件学习
文章目录DefinePlugin 介绍使用场景例子使用规则定义字符串的解决办法定义全局变量测试js 代码结果DefinePlugin 介绍DefinePlugin 允许创建一个在编译时可以配置的全局常量。注意:定义在全局有用,并不是说变量是在window下面使用场景例子对开发环境和生产环境使用不同的配置非常有用。如在开发环境中输出日志,在生产环境中不输出日志。这就是 DefinePlug...原创 2020-01-20 18:02:28 · 692 阅读 · 0 评论 -
5. webpack-dev-server代替proxy,允许外部IP访问
文章目录文章参考安装 webpack-dev-serverpackage.json 添加 scripts 命令,启动 webpack-dev-serverwebpack.config.js 配置属性说明打开指定端口默认打开浏览器外部地址可以访问支持httpsHMR (热模块替换)proxy 代理转发文章参考webpack-dev-server github开发中 Server(devSer...原创 2020-01-20 18:01:49 · 2865 阅读 · 1 评论 -
4. clean-webpack-plugin
文章目录文章参考每次手动删除 dist 目录比较麻烦,能否自动删除指定目录呢?安装webpack.config.js 使用插件默认配置信息配置说明(删除特定类型文件)文章参考clean-webpack-plugin githubclean-webpack-plugin github2每次手动删除 dist 目录比较麻烦,能否自动删除指定目录呢?安装npm install --sav...原创 2020-01-20 18:01:10 · 607 阅读 · 0 评论 -
3. webpack 自定义模板 html-webpack-plugin插件 (多页面多入口文件打包)
文章目录文章参考问题描述html-webpack-plugin的作用安装插件webpack.config.js 默认配置参数配置说明hashHTML如何让 title 变为配置的信息inject文章参考HtmlWebpackPlugin 中文文档HtmlWebpackPlugin githubwebpack4 之html-webpack-pluginhtml-webpack-plugi...原创 2020-01-20 18:00:32 · 5710 阅读 · 2 评论 -
2. webpack.config.js 配置文件
文章目录文章参考webpack.config.js 是默认的配置文件webpack打包运行 如下命令概念entry单个入口文件对象语法(多个入口文件)outputmodedevelopmentproductionloaderwebpack.config.js 配置loaderloader 特性plugins自定义插件webpack.config.js 配置使用插件文章参考webpack 概念...原创 2020-01-20 17:59:28 · 355 阅读 · 0 评论 -
1. 快速创建一个webpack项目
什么是WebpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。为什要使用WebPack模块化,让我们可以把复杂的程序细化为小的文件;类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实...原创 2020-01-20 17:58:10 · 1242 阅读 · 0 评论