什么是webpack
webpack是一个模块打包器。区别于Gulp和Grunt（是一个任务构建平台），webpack主要功能是实现模块打包，在此基础上可以执行其他构建任务，所以很多人把webpack认为是等同于“前端工程化”的存在。
什么是模块打包
ES6新增了ES module特性，让JavaScript实现了模块化功能，不再使用如“命名空间”、“立即执行函数”等旧式的模块化方案。现如今，许多现代浏览器已经逐渐原生支持ES module特性，but，meanwhile也有一些不支持新特性的顽固分子。为了让这些顽固分子也能运行我们使用模块化编写出来的js代码，就需要使用webpack打包，使代码能够被这些顽固浏览器执行。
PS：webpack也支持CommonJS、AMD、CMD的模块方案。
PPS：ES module是什么呢？就是以这种形式进行导入导出的JavaScript模块化方案：
// module.js
const name = 'es module'
export default {
name
}
// index.js
import name from './mdule.js'
console.log(name)
有兴趣了解JavaScript模块化演变历史的可以搜一搜，以后我会出篇文章聊聊这块。
GO ON!
webpack核心概念
- 入口
- 输出
- loader
- plugin
由于是基础入门篇，这里不作深入的介绍，以后我们会慢慢了解到这几个核心的概念。
webpack核心运行原理
webpack会从指定的入口文件（如果有webpack.config.js指定entry入口则使用该入口文件，如果没有默认使用src/index.js），依次找到依赖的模块树，递归去找到这些资源并使用loader去处理他们，然后将模块作为参数，传递给打包后的主函数进行统一加载处理。
动手吧
ok，多说无益，让我们开始，从实际代码出发，逐步深入了解webpack吧
首先在合适的目录，新建一个文件夹作为新的工作文件
mkdir webpack-demo
cd webpack-demo
npm init -y
touch index.html
mkdir src
touch webpack.config.js
npm i webpack webpack-cli --save-dev
cd src
touch index.js
touch a.js
// index.js
import name from './a.js'
console.log(`webpack init with ${name}`)
// a.js
const name = 'lzx'
export default name
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入打包后的js文件 -->
<script src="./dist/main.js"></script>
</body>
</html>
OK，文件准备齐活，我们来试试webpack的初体验吧
cd ../
npx webpack
看看是否多了一个dist文件夹，下面多了一个main.js。
鉴于我们的html文件已经提前引入了打包后的文件，我们可以用浏览器打开html文件，使用控制台查看打印信息。
就能够看到webpack init with lzx字样，说明我们的index.js，a.js被打包后已经正常工作了。
有的同学说，太简单啦！那么设置打包出入口，设置打包模式，构建es6语法，sass文件，又怎么设置呢？接下来，请一起来看看webpack的配置文件，怎么设置吧。
占坑：
文章写得不易，转载请注明出处：地鸣:完全搞懂webpack之一
