Loaders cnpm install vue-loader@14 vue-template-compiler --save-dev webpack.config.js module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] }], }, A
转载 2021-07-07 16:44:00
108阅读
Loaders cnpm install vue --save webpack.config.js resolve: { // 解决运行时报错 alias: { 'vue$': 'vue/dist/vue.esm.js' } } 使用 import Vue from "vue";
转载 2021-07-07 14:36:00
61阅读
一、前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架,开发效率会大幅下降。 在众多前端工程化工具中,webpack脱颖而出成为了当今最流行的前端构建工具 ...
转载 2021-09-10 10:05:00
108阅读
2评论
webpack面试总结: https://zhuanlan.zhihu.com/p/44438844 二 抽象语法树(Abstract Syntax Tree): 1 AST: JavaScript Parser 会把代码转化为一颗抽象语法树(AST),这颗树定义了代码的结构,通过操纵这颗树,我 ...
转载 2021-08-16 11:21:00
140阅读
2评论
是什么 webpack是JavaScript的模块打包工具,通过分析模块之间的依赖,将所有模块打包成一份或者多份代码包。 工作流程 1,初始化参数,初始化Compiler对象,从配置文件和shell 语句读取参数 2,开始编译,加载所有配置的插件 3,确定所有入口文件件 4,编译模块 5,根据模块之 ...
转载 2021-09-08 09:59:00
142阅读
2评论
一、前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架,开发效率会大幅下降。 在众多前端工程化工具中,webpack脱颖而出成为了当今最流行的前端构建工具 ...
转载 2021-09-10 10:05:00
106阅读
2评论
如果只是这样用,有什么问题呢?这样引入JavaScript是没办法大量引入的,什么算大量呢?
原创 2022-04-19 11:38:46
115阅读
【重学webpack系列——webpack5.0】 以下是本节正文: import()对于webpack来说,是一个天然的分割点,也就是说,webpack碰到import()会对import()进行解析。怎么解析的,过程主要是: 面试题:webpack解析import()的原理/webpack懒加载原理/webpack异步加载原理: 首先,webpack遇到import方法时,会将其当成
原创 2021-09-02 10:23:15
1443阅读
前言 如果我们想在webpack中使用vue,就需要在webpack中配置vue 配置vue 首先,我们需要在项目中安装vue,安装命令如下: npm install vue --save 安装完成后,我们在主入口main.js文件中导入vue并创建一个实例 import Vue from 'vue
Vue
原创 2021-07-13 11:05:34
277阅读
v-html  有xss风险computed有缓存,data不变就不会重新变化watch如何深度监听watch正常监听不到引用值对象属性的变化,需要在watch开启deep实现深度监听data(){    return{        styleData:{            fontSize:'40px', ---------    这里使用驼峰写法            backg
转载 2021-04-20 22:06:30
228阅读
2评论
8.webpackWebpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文官方网站:https://www.webpackjs.com/官网给出的解释:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(de...
原创 2021-08-18 10:49:52
141阅读
一、介绍: 1. js应用的模块打包工具 二、webpack安装 1. 环境:node环境 2. npm install webpack -g 说明:npm install 命令;webpack是工具名,可以指定版本如:webpack@5.58.3; -g表示全局安装,如果不想全局安装,仅为某项目安 ...
转载 2021-10-20 19:12:00
164阅读
2评论
Webpack是一个现代JS应用的静态模块打包的工具 学习Webpack需要我们安装NodeJS 配置CNPM & CRM 使用切换镜像的方式配置:【不建议】 npm config set registry http://registry.npm.taobao.org 安装镜像管理工具: npm i
转载 2020-07-24 21:52:00
128阅读
2评论
1.安装webpack项目环境bashnpminstallwebpacksavedev2.安装css的loaderbashnpminstallsavedevcssloader3.安装style的loaderbashnpminstallsavedevstyleloader
原创 2021-12-29 17:58:22
225阅读
Webpack作用:Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分ack-cli -vWebpack的配置:创
原创 2022-12-09 12:02:44
120阅读
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1
原创 2022-05-10 10:26:25
1407阅读
1点赞
8.webpackWebpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文官方网站:https://www.webpackjs.com/官网给出的解释:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
原创 2022-03-04 15:39:42
68阅读
1、项目根目录初始化package.json: npm init2、下载css与style的loader配置webpack中的css解析npm install css-loader style-loader --save-dev3、下载babel,webpack配置es6语法npm install babel-core babel-loader babel-plugin-transform-
原创 2022-11-20 00:41:19
101阅读
背景—​​Webpack​​​ 迭代到 4.x 版本后,其源码已经十分庞大,对各种开发场景进行了高度抽象,阅读成本也愈发昂贵。但是为了了解其内部的工作原理,让我们尝试从一个最简单的 webpack 配置入手,从工具设计者的角度开发一款低配版的 ​​Webpack​​。开发者视角—假设某一天,我们接到了需求,需要开发一个 ​​react​​​ 单页面应用,页面中包含一行文字和一个按钮,需要支持每次点
转载 2022-10-24 10:01:53
57阅读
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundlewebpack四个核心概念一 入口webpack.config.js里配置module.exports = {
转载 2021-02-03 20:05:21
824阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5