前言 前面篇章叙述了关于webpack的许多内容，从入门，打包第一个模块，到进阶，最后到本地、生产及打包的优化。本篇则提及一下在JavaScript社区中另外的一些类似的打包工具，它们有的更加轻量...
转载
2020-10-30 01:00:00
248阅读
2评论
介绍 webpack是一个前端的静态资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系 进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 官网：https://webpack.docschina.org/ webpack的作用有下面几点： webpack核心主要进行javas
原创
2022-07-07 11:10:19
973阅读
目录
webpack介绍
前端模块化和打包概念介绍
webpack和grunt/gulp的对比
webpack和nodejs的关系
webpack安装
webpack使用示例
环境搭建
使用webpack打包
使用打包后的js文件
入口和出口
局部安装webpack
package.json中定义启动
实践定义： 引用： 因为CommonJS规范的代码浏览器是不认识的，所以需要借助web
原创
2022-01-19 14:56:12
182阅读
目录webpack介绍前端模块化和打包概念介绍webpack和grunt/gulp的对比webpack和nodejs的关系webpack安装webpack使用示例环境搭建使用webpack打包使用打包后的js文件入口和出口局部安装webpackpackage.json中定义启动实践定义：引用：因为CommonJS规范的代码浏览器是不认识的，所以需要借助webpack对上述代码进行转换：查看结果：代码内容：在index.html中引用：
原创
2021-07-05 13:48:41
437阅读
optimization: { minimizer: [ new TerserJSPlugin({ terserOptions: { format: { comments: /(\s*#if)|(\s*#end)/i, }, }, }), ], }, // #ifdef H5 // #endif
转载
2020-12-12 12:43:00
941阅读
2评论
问题一：引入前端库，方法也是不一样的 比如 lodash.js ，作为一个 chunk 用 html-webpack-plugin 打包到页面里，会生成一个全局变量 window._ ，在其它 js 中不必 require('lodash'); 就可以直接使用 window._ 比如 webpack
转载
2016-10-13 11:49:00
102阅读
1.创建webpack.config.js配置文件 webpack.config.js配置文件的作用： 当运行webpack指令时，会加载其中的配置 所有的构建工具都是基于Nodejs，模块化默认使用commonjs 2.配置架构 const {resolve} = require('path') ...
转载
2021-10-28 20:11:00
136阅读
2评论
背景最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。 CommonsChunkPluginmodule.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPa
转载
2021-04-12 15:11:00
1838阅读
2评论
一. 概述 什么是webpack 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的生活中网络成为了必不
原创
2022-05-04 09:54:45
584阅读
开发环境： 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配置中的output.library.type: 'umd'为基础 使用webpack将文件打包为library后，打包好的文件被script标签引用时，library的名字会被放在全局变量中等待使用，至于库名下的内容，则与webpack配置中的output.library.export属性值相关。
转载
2021-10-28 23:15:00
194阅读
原因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阅读
学习目录：Vue.js 简介Vue.js 实例与数据绑定Vue.js 计算属性和侦听器Vue.js 条件渲染和列表渲染Vue.js 事件处理Vue.js 表单输入绑定Vue.js 组件基础Vue.js 组件通信Vue.js 插槽Vue.js 动态组件和异步组件Vue.js 自定义指令Vue.js 过渡和动画Vue.js 混入Vue.js 自定义事件和 v-modelVue.js 渲染函数和 JSX
原创
2023-07-05 02:04:52
283阅读
Bundle Analysiswebpack 打包后的文件如下，省略中间部分逻辑代码，可以看到是一个自执行函数，传入了一个对象，该对象的键 ./src/index.js 和 ./src/title.js 都是文件路径，值为导出的模块。// webpackBootstrap(function (modules) { // ... // ... // ... // Load entry module and return exports return __webpack_re
原创
2021-07-14 17:39:30
899阅读
什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
Webpack安装
全局安装
npm install webpack -g
npm install webpack‐cli -g
安装后查看
原创
2021-07-02 11:42:51
693阅读
什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，
原创
2022-01-19 11:10:25
88阅读
什么是 webpack ? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包
转载
2020-10-16 12:40:00
262阅读
2评论
Webpack 1.为什么要使用webpack打包工具？ webpack不仅可以让我们编写模块，而且还支持任何模块格式，并且可以同时处理资源，带来良好的开发体验以及提高了打包效率。 模块打包 ： 将不同模块的文件打包整合在一起，按照引用的树状形状来进行模块打包，保证项目的清晰度 编译兼容 ：将浏览器 ...
转载
2021-07-25 16:31:00
325阅读
2评论
1、包装html-webpack-plugin插件并在webpack.config.js中添加插件npm install html-webpack-plugin --save-dev webpack.config.jscons
原创
2023-07-17 14:23:52
144阅读
