如上图: 中间的蓝色块就是webpack. 他会将左边各种文件打包成右侧html能够解析的文件.
“模块化”可以说是现在前端最流行的三个字，而webpack就是一款非常非常流行的模块打包工具，它可以分析模块之间的依赖关系，并将这些模块根据指定规则打包成浏览器能识别的静态资源。
相信很多前端的朋友都知道webpack是什么，webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。
webpack这东西配置项比较多，讲起来比较琐碎，整个视频大概一个多小时，放在微信公众号上来发的话，基本上不太可能有人会看得完。
之前急着搭建博客，所以 Nodejs 安装好后就没管了，今天 webpack -v 命令死活用不了（提示“webpack 不是内部命令”），才发现是因为当时忘记配置环境变量了。
本篇博文的内容根据 入门 Webpack，看这篇就够了 该篇文章总结而来，其代码、模块示例、功能拓展部分均有所删减，若是想了解更多关于 WebPack 的详细内容，敬请参考原文
Webpack是一个静态资源打包工具，可以把JS及其所依赖的css和图片(都认为是一个模块)打包为一个.js文件，让客户端浏览器只引入最终的js文件，从而实现减少HTTP请求的目的，优化访问速度。
安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。 //一个常见的Webpack配置文件var webpack = require('webp
前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。
在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在<script>标签中即可。随着ajax异步请求的出现，慢慢形成了前后端的分离，客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题。比如全局变量同名问题，看下面的例子：
在前端工作的过程中，只要你接触过vue，angular，react，gulp就一定知道webpack或者听说过或者使用过webpack，但是或许你对webpack的使用方法并不是十分了解，只是会用写好的构建项目如：vue-cli，angular-cli等，那么这一系列的文章就是带你一点点走近webpack，真正弄懂webpack到底可以做什么，怎么做。 在真正的正文开始之前，我们先做一个小demo，就像所有的故事背景那样，这篇文章也作为该系列的故事背景。废话不多说，咱们开始吧。 一、安装（环境）
webpack是前端打包工具，是大前端自动化工厂的重要组成部分，webpack的主要是打包，webpack作为自动化工具链的一部分集成更大的工具系统，而不是将一切需求的实现都寄望于webpack。
在打包的时候，输入 webpack --model=development或production，
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
写在前面：该部分的安装都是基于windows系统的，且此处的webpack的版本为：3.6.0。
在前端工作的过程中，只要你接触过vue，angular，react，gulp就一定知道webpack或者听说过或者使用过webpack，但是或许你对webpack的使用方法并不是十分了解，只是会用写好的构建项目如：vue-cli，angular-cli等，那么这一系列的文章就是带你一点点走近webpack，真正弄懂webpack到底可以做什么，怎么做。
之所以直接执行npx webpack index.js就能打包成功，是由于webpack内置了配置文件。 尝试直接运行npx webpack会报错，因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的，每次都写很麻烦。有没有什么办法呢？
https://www.webpackjs.com/loaders/css-loader/
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
学习 Webpack 的原因 目前前端技术发展很快，引入了越来越多的思想、框架和工具 现阶段的大型应用就要求前端必须要有独立的项目，独立的项目想要有足够的效率就必须进行工程化。 具有复杂数据状态的应用
未进行打包优化的痛点： 随着项目的不断扩大，引入的第三方库会越来越多，我们每次build的时候会对所有的文件进行打包，耗时必定很长，不利于日常开发。 解决思路： 第三方库我们只是引入到项目里来，一般不会经常性的去修改源码，一般都是在src目录下编写业务代码，因此可以把第三方依赖和src分开打包。 每次build的时候我们只需要把之前build好的第三方依赖文件引入到项目中即可，避免了我们每次build的时候都会build第三方依赖。 当第三方依赖发生改变的时候我们只需要把第三方依赖再buil
webpack5 预计会在 2020 年年初发布，之前从 alpha 版本就有关注，本次重点更新在长期缓存，tree shakking 和 es6 打包这块。具体变更可以参考https://github.com/webpack/changelog-v5/blob/master/README.md。
Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏览器运行。
一. 对模块化进行解释 二. 对打包的理解 三. 关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置
webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥作用的地方。 shimming 另外一个使用场景就是，当你希望 polyfill 浏览器功能以支持更多用户时。在这种情况下，你可能只想要将这些 polyfills 提供给到需要修补(patch)的浏览器（也就是实现按需加载）。
vue init webpack prjectName 与 vue create projectName 有什么区别呢？
今天我们来聊聊webpack中注入环境变量的各种姿势，或者你会觉得注入环境变量通过命令行注入不就可以了吗？
在日常的开发中，总避免不了引入第三方的框架，比如常用的JQuery，此节我们来学习一下如何优雅并正确的用webpack引入第三方库。
这系列文章就是手把手教你如何从零构建一个webpack项目。目的就是为了了解webpack打包怎么玩的，平常项目开发中所用如ES6语法、less、vue是如何被打包的，是一个比较基础的内容，我也是为了总结一下这方面的知识点，梳理一下个人的知识体系而写下这些文字。 工具及版本：vscode、webpack(v4.41.5)、node(v10.16.0) git仓库：webpack-demo 1、什么是webpack？ “webpack is a module bundler.”—webpack官网
在项目中使用了一段时间的 Webpack ,得益于其多元的功能支持和配置定制，得到了很多本地编译和依赖管理的帮助。在搭建好配置和架构之后，开发过程中可以不再关注模块的组织、载入、转义、合并、精简、兼容等各种方面的工程问题，全部交给 Webpack 来处理。效率和体验都得到了不小的提升。本篇文章就是在对使用 Webpack 过程中的关键配置和方法做一些总结和沉淀。 本文是一些零散的功能记录、关键点配置和 Tips，大部分从使用过程中总结而来，并不是手册翻译也不是入门讲解，正在入手 Webpack 或在使用中遇
将 react 和 webpack4 进行结合，集 webpack 的优势于一身，从 0 开始构建一个强大的 react 开发环境。
---- webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代，让很多同学在学一个版本的时候，下一个新版本就发布了，让人感觉非常蛋疼和无奈： “我是谁，我在干嘛，我要做什么？” 不过，如果你已经掌握 webpack 比较老的版本，对于新版本的学习而言，应该只需要 0.5 天的工作量就可以完成。因为，其基本理念都是以 JS 为中心，增加的只是其辅助特性。 webpack 到目前为止已经走过了三个大版本，每个版本之间都，增加了非常多可用的特性，但是每个版本的具体配置项都有些差异，很容易让老版
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
首先创建一个webpack文件夹我取名叫webpackVue（为了后续把vue集成进来） 1、首先用npm初始化一下，在这个目录下，执行npm init 2、npm install webpack --save-dev 3、安装一些自己要用到的loader（加载css，js，scss等文件）： npm install style-loader css-loader sass-loader node-sass --save-dev 4、安装一些自己需要的plugin（html自动更行）：npm install
源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3
这是之前在公司oa项目优化时罗列的优化点，基本都已经完成，当时花了点心思整理的，保存在这里，方便以后其他项目用到查漏补缺。 1、打包文件中的app.js文件放入cdn，加快页面首次加载速度 2、提取公共方法，减少js代码量 3、提取公共组件，将统计分析的售前和售后，客户分配，客户管理，客服管理等页面的搜索条件模块化，减少了html代码量，减少了每个页面中都有的重复方法。 4、vue-router路由全部改成懒加载路由，该页面被点开时才加载该页面.vue组件，提高首页加载速度。 5、根据页面复杂度，删除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
2.安装到项目依赖 有时候我们的项目要依赖webpack，可以运行npm i webpack --save-dev
安装 webpack 1. 全局安装 npm i webpack webpack-cli -g 2. 项目 安装 开发 依赖 npm i webpack webpack-cli -D 打包文件 webpack ./src/index.js -o ./build/test.js --mode=development 执行打包后的文件 node ./build/x.js Webpack 支持 打包js / json 文件， 其它格式通过loader来处理 查看打包后的文件 ----
webpack 4 最大的改动就是废除了 CommonsChunkPlugin 引入了 optimization.splitChunks。
在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。比如，我们要使用JS的一些依赖库，就要在.html文件中使用<script>标签引用；要引用CSS的依赖就要使用<link>标签。如果页面中引入的依赖文件太多，那么向服务发送的请求也随之增多，势必会拖慢网页的加载速度，影响用户体验。另外，网页的内容也会变得很臃肿，增加维护的难度。
同时修改index页面中script的src属性为<script src="bundle.js"></script>
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
