webpack使用

  当我们引入了模块化的概念后，一个js文件就可以看做是一个模块。如果你把各个功能、逻辑独立的封装成一个一个的模块，你会发现你的应用会拆分成非常多个的模块。webpack会通过一个入口文件，通过import和require静态的分析出你整个应用的模块之间依赖的情况。模块之间的依赖情况可能是非常混乱的，一个模块可能会被不同的模块引入，你没法直观的知道这些模块之间的依赖情况。当webpack静态的分析出整个依赖树的时候，它就会进行一次打包，默认打包输出的文件是：main.js。文件名是可以改变的，不是强制的，你可以把它改变成你喜欢的名字，如aaa.js。

操作步骤

1. 在桌面新建一个文件夹，叫任意名字；
2. 文件夹中建一个文件，起名字：webpack.config.js；
3. 使用npm i -D webpack 来安装webpack；（i代表install，-D代表--save-dev）
4. 在webpack.config.js中开始写，首先引入path模块：
   const path = require('path');
5. 有一个模块的导出：module.exports = { }
6. 在之前建的目录下新建src目录
7. 在src目录下新建app.js文件
8. 在模块导出中配置程序打包的入口：entry:'./src/app.js'
9. 在之前建的根目录下新建dist文件夹，作为程序打包出口。（全称是distribution。因为开发和发布是的内容或者代码形式是不一样的，这时候就需要一个存放最终发布版本的代码，这就是dist文件夹的用处。）
10. 配置output出口，output是以对象形式存在的。

 output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist/assets'),
        publicPath:'/assets/'
    }

11. 在src目录下新建components文件夹，在components文件夹下新建Nav.js，输入一个默认导出函数：

export default function Nav(){
    console.log('I am Nav.')
}

12. 在app.js中引入

import Nav from './components/Nav.js'

Nav()

13. 接下来，我们需要打包了，但是现在却没有一个运行这个命令的地方，我们安装了东西却没有配置好package.json，所以我们需要npm init来新建一个package.json。
14. 打开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": ""
}

15. scripts中配置的就是我们需要运行的命令，这里我们可以通过npm run dev 来运行webpack了。
16. 打包之后我们可以到配置的文件夹下查看这个文件了。我们不需要知道此main.js是怎么运行的，我们只需要在页面中加载这个js文件。
17. 在src中新建index.html。
18. 在index.html中通过相对路径引用之前编译好的js文件：
    <script src="../dist/assets/main.js"></script>
    我们先这样写，实际上我们还有更简单的方法使用工具自动生成这句代码。
19. 打开这个html查看效果。