webpack中引入文件的几种写法

最新推荐文章于 2023-09-30 14:00:53 发布
最新推荐文章于 2023-09-30 14:00:53 发布
阅读量481 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43739375/article/details/104043893
版权

1. COMMONJS规范下的同步加载
在这里插入图片描述
2.COMMONJS规范下的异步加载
webpack实现了commonjs.js规范下的require.ensure方法,具体用法如下:

在这里插入图片描述
这里a.js和b.js会被打包成同一个文件，文件名称为‘bundlefileName’，如果文件名称写成路径形式的话，webpack会按照指定路径进行打包生成；

3.COMMONJS规范下的预加载懒执行
在这里插入图片描述
这种情况下，a.js会先被下载下来，知道出现“require(’./a’)”语句的时候才会执行，类似AMD规范

4、webpack自带的require.include
作用是只加载不执行，还有一个作用是提取父子模块中的公共部分，用的地方不多
在这里插入图片描述
如果加载的模块要执行的话：
在这里插入图片描述
5、ES6的import
作用和require等价
在这里插入图片描述

想吃可爱多
关注
webpack概念引入以及入门案例
rosecurry的博客
06-22 310
webpack概念引入 初学webpack，我们应该会有一个疑惑，就是自动化构建工具是基于什么情况产生的，能帮我们在开发工程中带来怎样的便利。下面我们就来解答下这种疑惑。 首先，我们来想想网页中会引用哪些常见的静态资源？无非就是以下几类。 js css image 字体文件 模板文件 但是随着项目的庞大，引入的这些资源也会增多，这些静态资源的增多，就会产生以下几个问题了。 网页加载速度慢，因...
webpack4 与只支持 script 标签引入的 js 库的结合使用及webpack.ProvidePlugin处理非npm库的配置方法
m0_37148591的博客
03-22 4017
前言 使用场景 公司需要使用一个付费的2D和3D可视化库HT for Web,这个库提供的例子基本都是原生js编写。但是我已有的框架是webpack+react+ts,而且这个库因为是收费的它不在 npm 中故不能使用 npm/yarn 命令来安装依赖。一开始看到这个有点懵。 在看了入门文档和技术人员发例子之后感觉直接在html入口文件中引入本地类文件即可，测试发现该库本该暴漏的全局变量在我的代码...
webpack概念的引入
weixin_38203203的博客
07-13 176
一.在网页中会引用哪些常见的静态资源? +JS - .js .jsx .coffee .ts(TypeScript 类 C#语言) +CSS - .css .less .sass .scss +Images - .jpg .png .gif .bmp .svg +字体文件(Fonts) - .svg .ttf .eot .woff .woff2 +模板文件 ...
Webpack 配置文件书写
H5_zhoujun的博客
07-05 226
Webpack 配置文件书写 webpack配置文件 也是Node.js文件 这个文件也是一个独立的 Common.js 模块 webpack单页面配置 const path = require('path') // 1. 创建模块 const webpackConfig = { entry: './src/index.js', //网络路径（ 相对路径 ） output: { //出...
webpack配置文件写法
Cao_Mary的博客
12-06 660
1.什么是webpack配置文件? 我们在打包JS文件的时候需要输入: npx webpack index.js 这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中 其实在webpack指令中除了可以通过命令行（终端）的方式告诉webpack需要打包哪个文件以外, 还可以通过配置文件的方式告诉webpack需要打包哪个文件 2.webpack常见配置 在htt...
webpack-plugin编写文件列表生成
瓜皮伦的博客
04-22 453
webpack-plugin编写文件列表生成 module.exports = class FileListPlugin { apply(compiler){ //在这里注册事件,类似于window.onload compiler.hooks.emit.tap('FileListPlugin-emit',(compilation) => { let fileList = []; //comp
webpack把vue文件编译成html,深入使用webpack构建vue.js单页应用
weixin_27009347的博客
06-19 845
原标题：深入使用webpack构建vue.js单页应用1.安装依赖包项目中使用了vue.js，webpack，gulp，还有饿了么开源的elementUI，因为使用了es2015，所以还需要引入babel将es6的js代码转换成es5。必须用到的依赖如下： 此外gulp-cli、webpack、babel-cli最好使用全局安装，npm install -g webpack，就可以在命令行下方便的...
Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源
youyacoder的博客
07-15 722
主要讲解webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源
教你手写webpack常用loader
gogo2027的博客
11-04 287
在本文中主要实现了8个平时会经常接触到的loader，包括JS的处理、CSS的处理、图片的处理。希望能够加深你我对loader的理解，在脑海中大概知道它可以做什么，或许有一天遇到问题的时候，你我可以通过这种开发loader的方式去解决。最近在工作中多多少少接触到了一点开发工具的需求——类似于babel分析文件、eslint插件、stylelint插件编写，觉得还是挺有意思的。还有postcss，他可以生成CSS的AST，之后也想去了解一下。当然，loader都写了，plugin肯定也得整一篇。
Webpack基础(3). 自动引入资源（webpack插件）
weixin_41294419的博客
04-26 1915
一. 什么是插件 随着应用程序的增长，如果继续手动地在 index.js 里面引入插件就会越来越困难，因此我们想要自动引入插件，那么就可以使用 webpack插件 。 webpack插件 什么是插件呢？webpack 就像一条生产线，要经过一系列的处理流程后，才能将入口文件转换为输出的结果。 例如上一篇中，入口文件 index.js，需要依赖于 hello-world1.js 和 hello-world2.js 两个 js 文件，而依赖的这两个 js 文件可能还会依赖于其他的 js 文件以及 css 文件，
Webpack配置.docx
05-15
Webpack打包配置，帮助前端程序实现模块的依赖打包，压缩代码，优化代码；主要运用于前端框架，比如vue，react等。
webpack工程化——在工程中引入webpack
zhaoge's blog
06-10 183
1.webpack最好不要全局安装 原因：会导致版本锁死，当工程的依赖（/node_module/webpack）升级时，版本不同会导致构建失败。 2.需要安装lodash npm install --save lodash 结果 如果只使用在测试环境下使用命令 npm install --save-dev webpack-cli 3.使用配置文件webpack.config.js 它的只要作用是将命令行中输入的命令集中于配置文件中 为了方便在package.json中配置脚本启动参数 输入npm
Webpack & 基础入门以及接入 CSS、Typescript、Babel
最新发布
cookcyq__的博客
09-30 2073
Webpack 是一款 JS 模块化开发的技术框架，其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。Webpack 拥有丰富的 plugins / loaders 插件生态圈，可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等，这也让 Webpack 至今仍然在许多项目中仍有一席之地。尽管现在的构建工具百花齐放，如 vite, vue-cli, craco, esbuild, glup, rollup。
webpack中引入资源
陈开心的博客
01-30 710
引入图片资源 用webpack内置的 Asset Modules 就可以轻松添加图片资源到我们的项目中，不需要再另外安装loader。 webpack.config.js添加配置： // using the built-in Asset Modules of webpack to incorporate our images { test: /\.(png|svg|jpg|jpeg|gif)/i, type: 'asset/resource' },
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
weixin_44784401的博客
01-30 9669
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
【webpack】webpack的基本使用
weixin_43655896的博客
02-13 7619
整理了一些webpack4基本的使用
webpack看这一篇就够了
热门推荐
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
webpack的基本使用（内含plugins插件）
m0_69674158的博客
08-15 571
webpack的概念和基本使用，含pluins插件
webpack项目引用CSS、JS、图片等文件
你的小可爱的博客~
07-13 1037
webpack打包时，项目中引入CSS、JS、图片不打包
webpack图片引入详解：解决路径问题与HTML中引入
现在，我们可以在CSS文件中引入图片，如`main.css`： ```css .example { background-image: url(../assets/dog.jpeg); } ``` 然后在`app.js`中导入这个CSS文件： ```javascript import './main.css'; ``` 执行`npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值