webpack
文章平均质量分 70
webpack在vue中的运用
有蝉
文章有用的话,请点个赞啊
展开
-
terser-webpack-plugin的使用:删除注释和console
场景:扫描漏洞的时候,nodel_modules中有的插件的版本注释会视为漏洞,需要删除这些注释注意:webpack4中用到terser-webpack-plugin压缩插件,不能使用最新的版本,而是terser-webpack-plugin@4.x版本;webpack5对应的使用terser-webpack-plugin@5.x版本,否则会报错误:Error: TypeError: Cannot read property ‘javascript‘ of undefined。...原创 2022-08-11 09:46:21 · 4794 阅读 · 1 评论 -
npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置
1、npm install <=> npm i--save<=> -S--save-dev<=> -Dnpm run start <=> npm start// 对应"scripts"里的"start"命令少敲几下键盘,何乐而不为2、npm i --save-d...原创 2019-04-16 15:55:57 · 599 阅读 · 0 评论 -
devDependencies和dependencies的区别
我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如:--save-dev (-D)--save (-S)首先需要说明的是Dependencies一词的中文是依赖和附属的意思,而dev则是develop(开发)的简写。在 package.json 文件里面的区别是:① 使用 --save-dev 安装的 ...原创 2019-04-16 16:02:21 · 193 阅读 · 0 评论 -
vue @ ~ 相对路径 路径别名设置
./这是相对路径的意思,同级目录。../上级目录。@/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么在build/webpack.base.conf里找到如下resolve: { extensions: ['.js', '.vue', '.json'],//取消后缀 引入文件路径就不用加文件后缀了 a...原创 2019-06-19 11:48:29 · 5661 阅读 · 0 评论 -
vue项目性能优化:vue异步组件懒加载(按需加载) & webpack按需加载——性能优化 & 外部引入一些插件不要在vue中引入
vue异步组件懒加载(按需加载)利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载(按需加载)。为什么需要懒加载?在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加...原创 2019-12-03 11:56:46 · 8710 阅读 · 0 评论 -
webpack 的externals配置 (externals有啥用)
为什么要配置externals官网解释:webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。怎么理解呢,意思是如果需要引用一个库,但是又不想让webpack打包(减少打包的时间),并且又不影响我们在程序中以CMD、AMD或者window...转载 2019-12-03 11:58:04 · 8089 阅读 · 0 评论 -
vue-cli2;vue配置开发,测试,生产环境api(打包方式)
vue配置开发,测试,生产环境api(打包方式)想实现通过不同的命令,打包调用不同环境的API,实现实现前端自动化部署。前端自动化部署工程比较复杂,这里只介绍通过不同的命令,打包的时候调用不同环境的API,例如:npm run build调用开发环境接口,打包开发环境npm run build:test调用测试环境接口,打包测试环境npm run build:prod调用生产环境接...原创 2020-01-16 15:32:42 · 2931 阅读 · 4 评论 -
webpack学习笔记(一)——概述
### 在网页中会引用那些常见的静态资源## 在网页中会引用哪些常见的静态资源?*Js .js .jsx .coffee .ts(TypeScript) *Css .css .less .sass .scss 【.sass以前不好用 .scss是.sass的进阶,现在的sass文件一般都是以.scss命名的】*Images .jpg .png .gif .bm...原创 2020-03-12 14:23:32 · 176 阅读 · 0 评论 -
webpack学习笔记(二)——在一个简单案例中使用webpack
一. 创建项目(手动),如下目录二. 用import 引入 jquery运行`npm init -y`初始化项目,使用npm管理项目中的依赖包使用`npm i jquery -S`安装jquery类库创建main.js,并书写隔行变色的代码逻辑直接在页面上引用main.js会报错,因为main中的代码 涉及到了es6的新语法 但是浏览器不识别,需要使用webpa...原创 2020-03-16 12:02:37 · 159 阅读 · 0 评论 -
webpack学习笔记(三)—— webpack最基本的文件配置以及webpack是如何执行的
问题:每次改变main.js中的代码都需要运行`webpack.\src\main.js.\dist\bundle.js`页面才会出现变化,怎样简化?答案:配置webpack步骤如下:一 创建webpack配置文件这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象...原创 2020-03-21 10:20:52 · 589 阅读 · 0 评论 -
webpack学习笔记(四)—— 如何让webpack监听代码编辑,进行自动打包编译
使用webpack-dev-server这个工具,来是实现自动打包编译的功能1. 运行 `npm i webpack-dev-server -D`把这个工具安装到项目的本地开发依赖2安装完毕后,这个工具的用法和webpack命令的用法完全一样3由于我们是在项目中安装的webpack-dev-server,所以无法把他当作脚本命令,在powershell终端中直接运行(只有那些安装到全局...原创 2020-03-21 11:03:02 · 802 阅读 · 0 评论 -
webpack学习笔记(五)—— webpack-dev-server如何自动打开浏览器
在package.josn里面 配置scripts中的dev命令 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"--open: 自动打开浏览器--port 3000: 指定打开时的端口号--contentBase src: 打开项目的主页面--hot: 热更新 给bundle.j...原创 2020-03-21 13:04:32 · 3031 阅读 · 0 评论 -
webpack学习笔记(六)—— 如何把index.html像bundle.js那样 也放入电脑内存中【html-webpack-plugin】
一 安装html-webpack-plugin插件npm i html-webpack-plugin -D二 配置webpack.config.js①导入html-webpack-plugin②配置这个插件//这个配置文件,其实就是一个JS文件,通过node中的模块操作,向外暴露了一个配置对象const path = require("path"); //node.js中...原创 2020-03-21 13:30:16 · 393 阅读 · 0 评论 -
webpack学习笔记(七)—— 配置处理css样式表的第三方loader
通过link的方式引入css,会引发二次请求,不推荐这么用改用import语法,导入css样式表webpack默认只能打包处理 js类型的文件 无法处理其他的非js类型的文件如果要处理非js类型的文件,需要手动安装一些合适的第三方loader加载器1 处理css文件,需要下面两个loadernpm i style-loader css-loader -D2 在we...原创 2020-03-21 13:51:40 · 714 阅读 · 0 评论 -
webpack学习笔记(八)—— webpack中url-loader的使用
默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是url地址,都处理不了cnpm i url-loader file-loader modules:{ rules:[ {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=1636'} //file-loader是内部依赖 ...原创 2020-03-24 12:35:46 · 1087 阅读 · 0 评论 -
webpack学习笔记(九)—— webpack中babel的配置 处理es6
在webpack中,默认只能处理一部分es6的新语法,一些更高级的es6语法或es7语法,webpack是处理不了的,这时候,就需要借助于第三方的loader,来帮助webpackchul//class 关键字,是es6中提供的新语法,是用来实现es6 中面向对象编程的方式//Java C# 实现面向对象的方式完全一样了, class是从后端语言借鉴过来的, 来实现面向对象//clas...原创 2020-03-25 11:23:47 · 1083 阅读 · 0 评论 -
webpack与vue的结合使用(一)—— 区分webpack中导入vue和普通网页使用
main.js//如何在webpack构建的项目,使用Vue进行开发//npm i vue -S//复习 在普通网页中如何使用vue//1. 使用script标签,引入Vue的包//2. 在index.html页面中,创建一个id为app 的 div容器//3. 通过new Vue得到一个vm的实例//在webpack中尝试使用vueimport Vue from '...原创 2020-03-25 13:11:44 · 318 阅读 · 0 评论 -
webpack与vue的结合使用(二)—— 在vue中结合render函数渲染指定的组件
默认webpack无法打包 .vue ,需要安装相关的loadercnpm i vue-loader vue-template-compiler -D在webpack配置文件中,新增loader配置项 {test:/\.vue$/,use:'vue-loader'}在webpack中,如果想要通过vue,把一个组件放到页面中去展示,vm实例中的render函数可以实现...原创 2020-03-25 14:13:09 · 630 阅读 · 0 评论 -
webpack与vue的结合使用(三)—— export default 和 export 的使用方式
Node向外暴露成员的形式和导入的形式Node向外导出module.exports = {}Node导入var 名称 = require('模块标识符')ES6中如何导入和导出模块在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块ES6中导出模块test.js//export //export defaultvar info...原创 2020-03-26 11:07:39 · 712 阅读 · 0 评论 -
webpack4.0核心概念(一)————零配置
非常弱的零配置,而且没有指定打包模式——mode原创 2020-09-21 15:04:06 · 165 阅读 · 0 评论 -
webpack4.0核心概念(二)———— 配置文件
webpack有默认的配置⽂件,叫 webpack.config.js ,我们可以对这个⽂件进⾏修改,进⾏个性化配 置 使⽤默认的配置⽂件:webpack.config.js 不使⽤⾃定义配置⽂件: ⽐如webpackconfig.js,可以在package.json文件中通过 --config webpackconfig.js 来指定 webpack使⽤哪个配置⽂件来执⾏构建...原创 2020-09-21 15:25:33 · 141 阅读 · 0 评论 -
webpack中 hash contenthash chunkhash之间的区别
hash 是代码发生改变hash就会改变contenthash 文件自身内容发生变化,才会更新chunkhash 模块中的代码改变,导致引入这个模块的chunk发生改变,然后会引起相应的bundle文件发生变化const path = require("path");const miniCssExtractPlugin = require("mini-css-extract-plugin");const htmlWebpackPlugin = require("html-...原创 2020-09-22 14:54:03 · 261 阅读 · 0 评论 -
webpack4.0核心概念(四)———— 前端开发工程环境搭建01 postcss
需要考虑的问题项目是pc端还是移动端移动端往往都是spa, pc端往往都是mpa 兼容的浏览器和版本项目是多人(前端)参与还是单人代码规范项目使用的技术栈 框架 —— vue react 样式处理 —— less、 sass ts —— babel es6+ 模板引擎 —— ejs、 pug 是否支持第三方字体(字体图标)涉及侵权工具类安装依赖包 切换国内源 npm config .npmrc可以配置国内源esli...原创 2020-09-22 15:32:12 · 370 阅读 · 0 评论 -
webpack4.0——自定义loader
// 函数 声明式函数 不可以是箭头函数 // loader有许多属性都挂载在this上面// 函数 必须有返回值// 如何返回多值 //this.callback(null, result)// 如何处理异步逻辑 // 使用this.async()返回的callback处理异步// 如何处理多个自定义loadermodule.exports = function (source) { // console.log(this.query); // console.log(so.原创 2022-03-13 15:08:06 · 240 阅读 · 0 评论 -
webpack4.0核心概念(五)———— browserslist
browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具。主要是为了表示当前项目的浏览器兼容情况。它主要被以下工具使用:Autoprefixer Babel post-preset-env eslint-plugin-compat stylelint-unsupported-browser-features postcss-normalize使用方式①在package.json中设置使用方式② 设置成独立的配置文件在项目...原创 2020-09-23 13:48:13 · 1977 阅读 · 0 评论 -
webpack4.0核心概念(六)———— 图片和第三方字体的处理
file-loader:处理静态资源模块 【url-loader包含了所有file-loader的功能,并且还有处理base64格式图片的功能】原理是把打包⼊⼝中识别出的资源模块,移动到输出⽬录,并且返回⼀个地址名称。如下图所以我们什么时候⽤file-loader呢? 场景:就是当我们需要模块,仅仅是从源代码挪移到打包⽬录,就可以使⽤file-loader来处理, txt,svg,csv,excel,图⽚资源啦等等 file-loader安装npm ins...原创 2020-09-23 16:01:39 · 280 阅读 · 0 评论 -
webpack4.0核心概念(七)———— “devtool:source-map“
1.为了开发时,快速的定位问题 2.线上代码,我们有时候也会开启 前端错误监控,快速的定位问题 可以建立源代码与打包后的代码的映射关系,通过sourceMap定位到源代码。 在dev模式中,默认开启,关闭的话 可以在配置⽂件⾥ webpack.config.jsdevtool:"none"devtool的介绍:https://webpack.js.org/configuration/devtool#devtool eval:速度最快,使⽤eval包裹模块代码, sour.原创 2020-09-23 16:42:55 · 1594 阅读 · 0 评论 -
webpack4.0核心概念(八)———— 多页面打包通用方案 MPA
未处理前的webpack.config.js文件//两个入口entry: { index: "./src/index.js", login: "./src/login.js",},//出口output: { path: path.resolve(__dirname, "./dist"), filename: "[name]-[hash:6].js",},//插件配置 plugins: [ new htmlWebpackPlugin({原创 2020-09-23 17:19:23 · 415 阅读 · 0 评论 -
webpack4.0核心概念(九)———— WebpackDevServer 设置代理
提升开发效率的利器 每次改完代码都需要重新打包⼀次,打开浏览器,刷新⼀次,很麻烦,我们可以安装使⽤webpackdevserver来改善这块的体验安装 npm install webpack-dev-server -D配置 修改下package.json "scripts": { "server": "webpack-dev-server"},在webpack.config.js配置: devServer: { contentBa...原创 2020-09-23 17:33:31 · 769 阅读 · 0 评论 -
webpack4.0核心概念(十)—— HMR(热模块替换-局部刷新)
HMR:当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新。css的HMR——只支持开发环境不能使用mini-css-extract-plugin需要使用style-loader,因为它不支持抽离出的css,需要用style-loader① 在webpack.config.js中配置 (需要webpack-dev-server配合)//头部引入webpackconst webpack = require("webpack");//****//****/...原创 2020-09-25 10:22:24 · 586 阅读 · 0 评论 -
webpack4.0核心概念(十一)———— babel
官⽅⽹站:https://babeljs.io/ 中⽂⽹站:https://www.babeljs.cn/Babel是JavaScript编译器,能将ES6代码转换成ES5代码,让我们开发过程中放⼼使⽤JS新特性⽽不⽤担⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。 Babel在执⾏编译的过程中,会从项⽬根⽬录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从 loader的options地⽅读取配置。·语法转换 const ——&g...原创 2020-09-25 13:49:41 · 293 阅读 · 0 评论 -
webpack4.0核心概念(十二)—— webpack 打包bundle原理分析与实现
执行 【npx webpack】这个命令的时候,webpack做了一下操作接收webpack配置 (webpack.config.js) 进⾏读取 ⼊⼝文件:从哪个⽂件开始分析 分析是否有依赖:哪些是依赖模块 分析依赖路径:这些依赖模块的位置 也就是路径信息 分析内容:对内容处理,处理成浏览器正确解析的 (es6/7 ——> es5) 递归处理其他依赖模块 ⽣成chunk 代码⽚段 补⻬函数 ⽣成bundle⽂件的内容 -》 启动器函数 出⼝:⽣成资源⽂件的名称和位.原创 2022-03-13 15:04:02 · 208 阅读 · 0 评论 -
webpack性能优化以及process.env.NODE_ENV变量的注入
webpack性能优化优化方向优化开发体验 1. 打包构建时间优化输出质量 1. 打包后的代码 体积小,没有冗余代码① 配置loader的使用范围尽可能使用includes或者exclude【推荐使用includes,范围更小】如果不配置这个属性,webpack会从项目的根目录查找相应的文件进行打包② 依赖的搜索目录明确告诉webpack依赖安装的目录③ 希望大家不要...原创 2020-11-13 16:55:20 · 2142 阅读 · 0 评论 -
vue项目中,配置全局scss变量
如下图所示,在imports.scss文件中的css变量,想要在单个vue组件中使用step1:自动化导入样式文件 (用于颜色、变量、mixin等),可以使用 style-resources-loader。 npm i -D style-resources-loaderstep2:在webpack配置文件中,增加以下配置即可 const path = require("path"); function addStyleResource(rule)...原创 2021-03-02 10:50:14 · 1866 阅读 · 1 评论 -
vue中通过externals的方式引入echarts(优化打包时间)
注意下webpack的版本在vue.config.js中设置configureWebpack的externalsmodule.exports = { lintOnSave: false, productionSourceMap: false, devServer: { open: true, port: 8001, overlay: { errors: true, warnings: true } }, configure原创 2021-05-26 11:37:47 · 2356 阅读 · 0 评论 -
vue中在vue.config.js使用externals引入jquery【cdn】
第一步index.html中引入jquery<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>第二步vue.config.js配置 configureWebpack:{ externals: { jquery: "jQuery" } },第三步引入并使用$import $ from "jquery";...原创 2021-09-08 16:12:20 · 2938 阅读 · 0 评论