前言 记一次配置webpack jqeury中的案例。 正文 选取自己需要安装的jquery版本号 dependencies:{ //此处的jquery版本根据npm后的版本来看，会有安装版本的提示 "jquery":"^3.3.1" } webpack 中的配置 plugins: [ new we
转载
2020-06-21 10:42:00
572阅读
2评论
一、webpack环境配置安装nodenode官网地址:https://nodejs.org/zh-cn/创建package.json文件命令：npminit安装webpacknpminstall--save-devwebpacknpminstall--save-devwebpack-cli全局安装：npminstall--globalwebpackwebpack-cli打包默认entry入口sr
原创
2019-03-12 12:02:01
832阅读
一、打包第三方类库 下面说2种方法： 第一种： 1、引入jQuery，首先安装： npm install --save-dev jquery 2、安装好后，在index.js中引入，用jquery语法进行测试 import css from './css/index.css';
import less from './css/black.less';
import $ from "
转载
2024-09-06 08:06:17
49阅读
1、相同点都是现代化打包工具2、为什么Vite启动快2.1底层语言从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10~100倍。2.2webpack和vite的启动方式webpack原理图vite原理图webpack:分析依赖=》编译打包=》交给本地服务器进行渲染。首
转载
2023-10-17 20:36:20
154阅读
1、HtmlWebpackPlugin 自动生成基本的 html 页面2、开启文件3、w
原创
2022-02-28 18:13:02
252阅读
1、HtmlWebpackPlugin 自动生成基本的 html 页面2、开启文件监听3、webpack-dev-server热更新安装依赖cnpm i html-webpack-plugin webpack-dev-server -D配置webpack.config.js'use strict'const path = require('path');const HtmlWeb...
原创
2021-07-12 14:18:21
192阅读
开发环境： webpack ./src/index.js -o ./build/built.js --mode=development
含义：webpack会以./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
整体打包环境，就是开发环境。
生产环境： webpack ./src/index.js -o ./buil
原创
2021-04-22 09:19:48
401阅读
image.png 一. 概述 什么是webpack 模块打包机：它做的事情是
原创
2022-06-20 22:38:36
149阅读
一. 概述 什么是webpack 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的生活中网络成为了必不
原创
2022-05-04 09:54:45
584阅读
webpack 插件 webpack-dev-server 1、作用 每当修改源代码，自动进行项目的打包和创建 2、安装与配置 安装：输入命令：npm install webpack-dev-server@3.11.2 -D 配置： 修改 package.json --> scripts 中的 de ...
转载
2021-08-12 15:47:00
79阅读
2评论
安装webpack插件的作用 通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来方便。最常用的webpack插件有如下两个： webpack-dev-server 类似于node.js阶段用到的nodemon工具 每当修改了源代码，webpack会自动进行项目的打包和 ...
转载
2021-10-03 15:39:00
109阅读
2评论
插件可以完成更多 loader 不能完成的功能。 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。 接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个
转载
2017-04-24 19:22:00
134阅读
2评论
原因Webpack5已经废弃了url-loader、file-loader，使用后资源无法正常加载，图片无法正常显示参考文档：https://webpack.docschina.org/migrate/5/#clean-up-configuration解决方案1.在use后添加typerules: [{
test: /\.less$/,
转载
2021-10-31 15:39:00
119阅读
以下内容均以webpack配置中的output.library.type: 'umd'为基础 使用webpack将文件打包为library后，打包好的文件被script标签引用时，library的名字会被放在全局变量中等待使用，至于库名下的内容，则与webpack配置中的output.library.export属性值相关。
转载
2021-10-28 23:15:00
194阅读
一、webpack基本安装 1、创建webpack项目目录如webpackDemo，并进入webpackDemo; 2、 在node已经安装的前提下，打开命令行控制器，输入如下命令： npm init -y npm install webpack webpack-cli --save-dev //安 ...
转载
2020-10-25 13:45:00
321阅读
2评论
webpack只是一个打包模块的机制，只是把依赖的模块转化成可以
转载
2021-07-18 16:25:28
1505阅读
1、安装webpack（局部安装webpack）。npm i webpack webpack-cli -D2、安装成功之后，你会在package.json文件中看到这个3、新建webpack.config.js文件，里面写配置编译模式，入口出口等（这里演示的是单入口打包）// 导入node.js中专门操作路径的模块
const path = require('path');
module.expo
原创
2024-08-07 08:58:21
51阅读
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundlewebpack四个核心概念一 入口webpack.config.js里配置module.exports = {
转载
2021-02-03 20:05:21
824阅读
2评论
