Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
随着前端需要处理的内容越来越多,同时也为了解决JS全局标识符污染问题,模块化开发成为了主流,但是浏览器却不能识别模块化.
随着新时代语法的更新,让开发更有效率,维护更方便.但是依然会有大量的新语法在很多浏览器上不太支持.开发和生成出现了问题,如ES6的语法
为了提升开发效率,出现了大量的预编译语言,如less,styls,但是这些语言不能被浏览器直接识别.那么就需要生产时提前编译,如果项目中用到了很多预编译语言,那么所有预编译语言的编译就是一个繁琐的工作
随着技术的发展,我们就需要一个工具帮我们提升代码的开发效率, 优化代码的编译. 将浏览器不能识别的语法自动处理为浏览器能够识别的语法.
此时Webpack就应运而生了
为什么要学习webpack
- 理解前端工程化概念，工具，目标
- 一个团队总是需要有那么几个人熟悉webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
主要内容
在前端中项目主要由资源构成，在比较早的时期，前端需要手动的管理这些资源
什么是webpack
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
- 多份资源文件打包成一个Bundle
- 支持多种语言
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
使用Webpack
在安装 Webpack 前，你本地环境需要支持 node.js
使用 npm 安装 webpack
npm i -D webpack webpack-cli
在 app 目录下添加 runoob1.js 文件，代码如下：
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js
执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]
关于webpack的使用方法，基本都围绕‘配置’展开，而这些配置大致可以划分为两类
流程类：用于流程中的某个or若个环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化的能力的配置项
在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。 我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件
指定配置文件
果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？比如我们将webpack.config.js修改成了 wk.config.js这个时候我们可以通过 --config 这个命令行选项 来指定对应的配置文件
webpack --config wk.config.js
