为什么需要webpack 作用是什么_为什么要使用webpack

传统的方式有什么问题

一是浏览器中运行 JavaScript 的方式的效率问题

我们知道有两种方式在浏览器上执行js
第一种方式，引用一些脚本来存放每个功能；此解决方案有个问题，如果文件比较多，比如有10个文件则需要发送十次http请求来加载，因为文件之中有函数的相互引用，则如果因为网络原因其中一个文件未加载成功，则页面功能就无法顺利执行。

第二种方式，使用一个包含所有项目代码的大型 .js 文件，但是这会导致作用域、文件大小、可读性和可维护性及文件加载时长性能方面的问题。

二是浏览器对新技术的支持不足

现代JavaScript应用程序 的最大特点可能就是 模块化 了，这里面涉及很多新技术，比如ES6、TS的使用越来越普及，再比如Vue框架，包含了特定的语法：指令。
但是出现的问题是：这些新兴的技术并不是在所有的浏览器上都适用（浏览器不支持模块化，它不能像node.js那样快速地去本地加载一个个模块文件），都需要将源代码转化为可以直接在浏览器上运行的代码。

webpack是怎样做的

传统的任务构建工具基于 Google 的 Closure 编译器都要求你手动在顶部声明所有的依赖。然而像 webpack 一类的打包工具自动构建并基于你所引用或导出的内容推断出依赖的图谱。 依赖自动收集 这个特性与其它的如插件 and 加载器一道让开发者的体验更好。

项目中使用的每个文件都是一个模块

# ./index.js
import app from './app.js';
# ./app.js
export default 'the app';
通过互相引用，这些模块会形成一个图(ModuleGraph)数据结构。 
在打包过程中，模块会被合并成 chunk。 chunk 合并成 chunk 组，并形成一个通过模块互相连接的图(ModuleGraph)。 那么如何通过以上来描述一个入口起点：在其内部，会创建一个只有一个 chunk 的 chunk 组。 
# ./webpack.config.js
module.exports = {
  entry: {
    home: './home.js',
    about: './about.js',
这会创建出两个名为 home 和 about 的 chunk 组。 每个 chunk 组都有一个包含一个模块的 chunk：./home.js 对应 home， ./about.js 对应 about 
chunk的形式
 
chunk 有两种形式： 
initial(初始化) 是入口起点的 main chunk。此 chunk 包含为入口起点指定的所有模块及其依赖项。
non-initial 是可以延迟加载的块。可能会出现在使用 动态导入(dynamic imports) 或者 plitChunksPlugin 时 
每个 chunk 都有对应的 asset(资源)。资源，是指输出文件（即打包结果）。 
# webpack.config.js
module.exports = {
  entry: './src/index.jsx',
# ./src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import('./app.jsx').then((App) => {
  ReactDOM.render(<App />, root);
});
这会创建出一个名为 main 的 initial chunk。其中包含： 
./src/index.jsx
react
react-dom 
以及除 ./app.jsx 外的所有依赖
 然后会为 ./app.jsx 创建 non-initial chunk，这是因为 ./app.jsx 是动态导入的。 
Output: 
/dist/main.js - 一个 initial chunk
/dist/app.js - non-initial chunk 
output(输出)
 
输出文件的名称会受配置中的两个字段的影响： 
output.filename - 用于 initial chunk 文件
output.chunkFilename - 用于 non-initial chunk 文件
在某些情况下，使用 initial 和 non-initial 的 chunk 时，可以使用 output.filename 
这些字段中会有一些 占位符。常用的占位符如下： 
[id] - chunk id（例如 [id].js -> 485.js）
[name] - chunk name（例如 [name].js -> app.js）。如果 chunk 没有名称，则会使用其 id 作为名称
[contenthash] - 输出文件内容的 md4-hash（例如 [contenthash].js -> 4ea6ff1de66c537eb9b2.js）
                    想要理解为什么要使用 webpack，我们先回顾下历史，在打包工具出现之前，我们是如何在 web 中使用 JavaScript 的，然后就能窥探webpack要解决的问题是什么，可以从两方面来看传统的方式有什么问题一是浏览器中运行 JavaScript 的方式的效率问题我们知道有两种方式在浏览器上执行js第一种方式，引用一些脚本来存放每个功能；此解决方案有个问题，如果文件比较多，比如有10个文件则需要发送十次http请求来加载，因为文件之中有函数的相互引用，则如果因为网络原因其中一个文件未加载成功，
				注：一、摘要说明(会不定期更新)：
A：这里是webpack1.0+，2.0+请移步这里(已经配置好的简单脚手架) https://github.com/wjf444128852/dev-webpack
B：webpack2.0+案例：1 豆瓣热映电影
C：react+webpack3.0+(开发和生产环境分离的脚手架，建议了解其他之后再参考，欢迎clone,issuse,扩展使用,原本配置...
初衷： 本文我们讲一下Webpack，说说它能干什么及为什么要使用它。把我整理的笔记分享给大家，如有错误请各位指出，不喜勿喷。
适合人群： 前端初级开发，大佬绕道。
本文讲解是Webpack4.x，注意版本。
为什么要使用Webpack
在之前我们都是用传统的方式去开发一个系统，html、css、js，就这些。开发完之后直接给后台人员去部署，当然这没什么问题。当我们的项目需求不断增加，代码也就越多，越不好维护，一个文件代码都上百甚至上千行，里面代码甚至都是重复的,还需要担心script标签依赖顺序问题
				一：为什么用webpack？ 
在日常的开发中经常在一个index.html页面中引入多个css，js文件，会导致页面加载慢，所以有必要将他们合并为一个文件，所以使用webpack（其实还有很多如sass lass等第三方中间语言需要编译后运行，所以页需要用到webpack编译打包）;
二：我们经常用一个叫做main.js的文件作为js的入口文件，就是说所以的js文件都被引入到main.js文...
为什么要使用webpack，我第一印象就是使用其进行打包，但是并没有回答到点上。下面我们将总结一下为什么要使用webpack等一系列打包工具呢？
2.1、浏览器的运行效率问题
我们如果不使用任何打包工具，还是按照最原始的写法，其实在开发中就会变得麻烦，比如说我们如果编写的代码文件比较多，此时我们就需要发送多次http请求，如果其中一个文件没有请求回来，此时如果下面的文件对该文件存在一些依赖，就会导致页面中的部分功能没有办法实现。
再者说如果我们将代码编写入一个文件中，此时就会出现文件
				webpack是什么？
WebPack是前端资源模块工具，主要分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack配置文件是webpack.config.js，整个文件遵循commonJS规范，所
				一、基础应用篇
1.1 为什么需要 Webpack
想要理解为什么要使用 webpack，我们先回顾下历史，在打包工具出现之前，我们是如何在 web 中使用 JavaScript 的。在浏览器中运行 JavaScript 有两种方法：
第一种方式，引用一些脚本来存放每个功能，比如下面这个文档：
01-why-webpack/index-1.html
<!DOCTYPE html>
<html lang="en">
 <meta charset="UT
一、为什么要用webpack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 
1.模块化，让我们可以把复杂的程序细化为小的文件; 
2.类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实...
				细说 webpack 1 为什么要选择 webpack
大家好！我是萝卜，webpack作为目前最流行的构建工具，几乎成为前端同学武器库中必备的工具之一，写这个系列文章的用意就是想把自己在平时工作中使用webpack的一些经验和心得和大家分享，也是对自己这些年的前端工作做一个阶段性的总结，希望能给大家带来些许的帮助。
在学习webpack前，需要先知道为什么要用webpack，我将从以下两个方面进...
				什么是Webpack?怎么使用Webpack?
什么是Webpack?
Webpack模块打包工具，它会分析模块之间的依赖关系，然后使用loaders处理它们，最后生成一个优化并合并后的静态资源。
简单的说就是打包，压缩各种静态资源的工具
2.目的？
减少浏览器像服务器的请求次数
节约服务器的带宽资源
3.如何使用Webpack？
(1)Webpack的环境搭...
            Failed to launch the browser process! undefinedy以及Failed to load Chrome DLL from puppeteer错误的处理
            XAgent的部署及运行