随笔分类 - webpack/vite和NPM
摘要：来自公众号：前端真好玩 Source map 想必大家都不陌生。线上的代码多是压缩后的，如果线上有报错却只能调试那个代码多半是个噩梦。因此我们需要有一个桥梁帮助我们搭建起源代码及压缩后代码的联系，source map 就是起了这个作用。以下是 MDN 对于 source map 的解释： 调试原始源
阅读全文
摘要：一、file-loader 是什么 1、什么是 file-loader 简单来说，file-loader 就是在JS代码里 import/require 一个文件时，会将该文件生成到输出目录，并且在JS代码里返回该文件的地址。 2、如何使用 // 1、安装 file-loader npm insta
阅读全文
摘要：一、module，chunk 和 bundle 的区别 看 webpack 文档的时候，对这 3 个名词云里雾里的，感觉他们都在说打包文件，但是一会儿 chunk 一会儿 bundle 的，逐渐就迷失在细节里了，所以我们要跳出来，从宏观的角度来看这几个名词。 webpack 官网对 chunk 和
阅读全文
摘要：1、vue 文件 vue文件是一个自定义的文件类型，用类HTML语法描述一个vue组件，每个.vue组件包含三种类型的顶级语言块 <template>、<script>、<style>，还允许添加自定义的模块 2、vue-loader 作用 解析和转换.vue文件，提取出其中的逻辑代码 script
阅读全文
摘要：一、结论 npm install，本身就有一个别名 npm i npm i module_name -S，即 npm install module_name --save ，写入dependencies，发布到生产环境 npm i module_name -D，即 npm install modul
阅读全文
摘要：DefinePlugin 用来做定义，这就类似于我们项目开发中的config文件一样，在config文件中一般放的是系统代码中的一些服务器地址之类的公共信息，我们将这些信息提取出来单独放在配置文件中，方便于后期的维护和管理。 那 DefinePlugin 的功能和 config 这个文件类似，我们可
阅读全文
摘要：1、配置@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // 需要引入 path export default defineConfig({ plug
阅读全文
摘要：一、打包第三方类库 下面说2种方法： 第一种： 1、引入jQuery，首先安装： 2、安装好后，在index.js中引入，用jquery语法进行测试 3、webpack打包测试，jquery语法正常使用。 第二种： 如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负
阅读全文
摘要：一、less文件打包和分离 1、要使用less，首先使用npm安装less服务；还需要安装Less-loader用来打包使用。 2、在module中配置 3、在html中编写一个div，在css中新建一个less文件 4、引入到index.js中 5、使用webpack进行打包，输入npm run
阅读全文
摘要：一、babel支持 Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-pres
阅读全文
摘要：一、CSS中的图片处理： 1、首先在网上随便找一张图片，在src下新建images文件夹，将图片放在文件夹内 2、在index.html中写入代码：<div id="pic"></div>来放置图片 3、设置图片的css 4、编写完成后，安装file-loader和url-loader 5、安装好后
阅读全文
摘要：一、CSS文件打包 1、在src下新建css文件，在css文件下新建index.css文件，输入以下代码 2、css建立好后，需要引入到入口文件，这里我们引入到index.js中 3、在终端安装style-loader和css-loader 4、安装好后，我们开始在webpack.config.js
阅读全文
摘要：一、core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended 之前的电脑 node 是 14 版本，对应 npm 是 6 版本，项目都是正常启动的。但是新换了个笔记本，新装 node 环境，node 是最新的 1
阅读全文
摘要：一、安装和配置webpack 1、全局安装webpack 这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。 2、先创建项目目录结构，根目录是mywebpack。进入项目根目录，执行：npm init，生成package.json文件，内容就是一堆json数据，基本
阅读全文
摘要：npm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。正因为有了npm，我们只要一行命令：npm install，就能安装别人写好的模块 。 一、从 npm install 说起 npm install 命令用来安装模块到node_modules目录。 安装之前，
阅读全文
摘要：由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。 一、安装Node.js 首先，从Node.js官网下载对应平台的安装程序，网速慢的童鞋请移步国内镜像。在Windows上安装时务必选择全部组件，包括勾选Add to Path。 安装完成后，在Wind
阅读全文
摘要：一、什么是 nrm nrm 是一个 npm 源管理器，允许你快速地在 npm 源间切换。 什么意思呢？npm默认情况下是使用npm官方源（使用npm config ls 命令可以查看），在国内用这个源肯定是不靠谱的，一般我们都会用淘宝npm源：https://registry.npm.taobao.
阅读全文
摘要：一、如何动态导入静态图片 详见文档：静态资源处理 - https://cn.vitejs.dev/guide/assets.html 1、将资源引入为 URL：服务时引入一个静态资源会返回解析后的公共路径 2、new URL(url, import.meta.url) import.meta.url
阅读全文
摘要：1、应用背景 公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是使用 webpack-obfuscator 插件通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。 2、webpack 相
阅读全文
摘要：一、shimming 垫片的场景 在webapck打包的过程中，我们往往需要做代码的兼容，或者打包过程的兼容。比如，我们使用的 @babel/polyfill，他所解决的就是打包代码运行在低版本浏览器上时有些api不兼容的问题，比如IE浏览器上不支持的Promise api，他就会自动的在打包过程中
阅读全文
