当我们引入了模块化的概念后，一个js文件就可以看做是一个模块。如果你把各个功能、逻辑独立的封装成一个一个的模块，你会发现你的应用会拆分成非常多个的模块。webpack会通过一个入口文件，通过import和require静态的分析出你整个应用的模块之间依赖的情况。模块之间的依赖情况可能是非常混乱的，一个模块可能会被不同的模块引入，你没法直观的知道这些模块之间的依赖情况。当webpack静态的分析出整个依赖树的时候，它就会进行一次打包，默认打包输出的文件是：main.js。文件名是可以改变的，不是强制的，你可以把它改变成你喜欢的名字，如aaa.js。
操作步骤
- 在桌面新建一个文件夹，叫任意名字；
- 文件夹中建一个文件，起名字：webpack.config.js；
- 使用npm i -D webpack 来安装webpack；（i代表install，-D代表--save-dev）
- 在webpack.config.js中开始写，首先引入path模块：
const path = require('path'); - 有一个模块的导出：module.exports = { }
- 在之前建的目录下新建src目录
- 在src目录下新建app.js文件
- 在模块导出中配置程序打包的入口：entry:'./src/app.js'
- 在之前建的根目录下新建dist文件夹，作为程序打包出口。（全称是distribution。因为开发和发布是的内容或者代码形式是不一样的，这时候就需要一个存放最终发布版本的代码，这就是dist文件夹的用处。）
- 配置output出口，output是以对象形式存在的。
output:{
filename:'main.js',
path:path.resolve(__dirname,'dist/assets'),
publicPath:'/assets/'
}
- 在src目录下新建components文件夹，在components文件夹下新建Nav.js，输入一个默认导出函数：
export default function Nav(){
console.log('I am Nav.')
}
- 在app.js中引入
import Nav from './components/Nav.js'
Nav()
- 接下来，我们需要打包了，但是现在却没有一个运行这个命令的地方，我们安装了东西却没有配置好package.json，所以我们需要npm init来新建一个package.json。
- 打开package.json，做相应的修改：
{
"name": "f",
"version": "1.0.0",
"main": "webpack.config.js",
"dependencies": {
},
"devDependencies": {
"webpack":"^2.3.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack"
},
"author": "",
"license": "ISC",
"description": ""
}
- scripts中配置的就是我们需要运行的命令，这里我们可以通过npm run dev 来运行webpack了。
- 打包之后我们可以到配置的文件夹下查看这个文件了。我们不需要知道此main.js是怎么运行的，我们只需要在页面中加载这个js文件。
- 在src中新建index.html。
- 在index.html中通过相对路径引用之前编译好的js文件：
<script src="../dist/assets/main.js"></script>
我们先这样写，实际上我们还有更简单的方法使用工具自动生成这句代码。 - 打开这个html查看效果。
