Webpack作为一个模块打包器，相信前端开发小伙伴对它都有个或多或少的了解。 如果你刚刚接触，希望这篇文章可以为你打开初识Webpack的大门。
了解
webpack 是什么？
就像我开头讲的，webpack是一个模块打包器。 最早，Webpack只是一个JS打包工具，现在Webpack功能日益强大，它不仅可以打包JS，还能打包CSS、图片等文件。
Webpack 的基本工作原理
在理解它的工作原理前，我们需要了解几个基础概念：
- 树结构：入口文件中引入资源，形成所有依赖关系的树状图。
- 模块：对于Webpack来说，所有资源都是模块。
chunk：模块打包过程中，被操作的模块文件叫做chunk。bundle：bundle是打包后的文件，也就是上图中的“静态资源”。
知道几个概念之后，简单看下它的基本流程：
往简单了想，Webpack的工作，就是将你已经写好的各小块代码，根据依赖关系的树状图打包，最后形成浏览器看得懂的打包文件。
初试
现在你已经大致知道webpack是什么。我们开始撸起袖子试一试！
准备工作（安装）
首先创建一个代码仓库目录，然后进入目录，打开终端，执行npm init来初始化项目。初始化成功后，目录中会出现package.json文件。
然后安装webpack和webpack-cli。
创建目录结构
在项目根目录上创建这样的目录结构：
src
|__ index.js
|__ one.js
|__ two.js
在two.js中写点什么：
const a = 10,
b = 20,
c = 604;
module.exports = { a, b, c};
然后在one.js中将two.js引入：
import { a, b, c } from './two.js';
export default sum = a+b+c;
再到index.js中将one.js引入：
const sum = require('./two.js');
console.log(sum);
配置webpack
配置前，需要知道接下来将要用到的webpack配置项：
entry：入口。告诉webpack应该使用哪个模块来作为构建其内部依赖树的开始。output：出口。告诉webpack在哪里输出它所创建的bundle，以及怎样命名这些文件。context：用于解析配置中的entry、loader、plugin中的相对路径（除了output）。关于loader和plugin的作用，我们后续用到再说。
根目录下创建一个webpack.config.js，开始配置：
// 引入path包,它是nodeJS内置用来处理路径的包
const path = require('path');
module.exports = {
// 设置解析相对路径,path.resolve 将./解析为绝对路径
// __dirname指向当前js文件的绝对路径
context: path.resolve(__dirname, './'),
// 配置入口
entry: './src/one.js',
output: {
filename: 'build.js',
// 设置输出目录,path.join使用当前系统的路径分隔符连接路径
path: path.join(__dirname, 'dist')
}
};
就这样，webpack最最基础的配置就完成了，接下来执行webpack相关命令就可以了。
为了方便执行，到package.json配置一下webpack的编译命令：
{
// ...
"scripts": {
"build": "webpack --config webpack.config.js"
}
// ...
}
然后在当前目录的终端执行npm run build，就会执行我们上面配置的webpack命令了。
