weixin_43869192

webpack4搭建项目环境

webpack发展史

在没有ajax和jQuery之前，前端是不存在打包这个说法的，js没有大规模使用，只做简单的时钟、mp3等效果，直接弄一个js文件引入就行
之后，人们开始使用iframe和flash等于服务器通信，因为这两种方式太过于tricky（棘手），直到google退出gmail的时候，人们发现了XMLHttpRequest，也就是AJAX，从此开始，前端出现了jquery等各种插件和库，js文件越来越多。
随着js做的事越来越多，js文件越来越大，U管理费用US等js文件压缩合并工具陆续诞生，但是也有很多问题，比如：
1. 库和插件为了要给他人调用，肯定要找个地方注册，一般就是在 window 下申明一个全局的函数或对象。难保哪天用的两个库在全局用同样的名字，那就冲突了
2. 库和插件如果还依赖其他的库和插件，就要告知使用人，需要先引哪些依赖库，那些依赖库也有自己的依赖库的话，就要先引依赖库的依赖库，以此类推
2009年，后端js发展，人们提出了CommonJS模块化规范，也就是exports和require语法。但是它并不适用于浏览器，require是同步的，堵塞js脚本的执行，所以人们基于CommonJS定义了AMD规范（2011年），使用异步回调的语法来并行下载多个依赖项，也就是define函数（必须返回值）。现在出了ES6，7之后，已经差不多淘汰AMD了
2012年，webpack诞生，Browserify同期诞生，但webpack比它的优点：多文件打包、可以关心所有文件的打包、对资源文件的加载支持完善、支持CommonJS、AMD和ES6模块规范等

简单搞一个SPA应用

页面搭建

接下来我们简单搞一个SPA应用，弄一个webpack配置
首先，本地肯定需要安装nodeJS，因为webpack是基于nodeJS的

然后，搭建项目目录，npm init初始化package.json文件，晒一下目录结构

├─ .eslintrc.js
├─ .gitignore
├─ dist
│    ├─ index.html
│    ├─ index.js
│    └─ index.js.map
├─ index.html
├─ package-lock.json
├─ package.json
├─ src
│    ├─ index.js
│    ├─ router.js
│    ├─ untils
│    │    └─ axios.js
│    └─ views
│           ├─ about
│           └─ home
└─ webpack.config.js

接下来，需要安装依赖的包了

先安装eslint进行语法检查

npm install eslint eslint-config-enough babel-eslint eslint-loader --save-dev

// package.json里面插入如下配置
"eslintConfig": {
    "extends": "enough",
    "env": {
      "browser": true,
      "node": true
    }
  }

然后编辑index.html文件
```
  
  
  
  首页


  首页
```

编辑src下的index.js文件

// 引入 router
import router from './router'

// 启动 router
router.start()

编辑src下的router.js文件

// 引入页面文件
import home from './views/home'
import about from './views/about'

const routes = {
  '/home': home,
  '/about': about
}

// Router 类，用来控制页面根据当前 URL 切换
class Router {
  start () {
    // 点击浏览器后退 / 前进按钮时会触发 window.onpopstate 事件，我们在这时切换到相应页面
    // https://developer.mozilla.org/en-US/docs/Web/Events/popstate
    window.addEventListener('popstate', () => {
      this.load(window.location.pathname)
    })

    // 打开页面时加载当前页面
    this.load(window.location.pathname)
  }

  // 前往 path，变更地址栏 URL，并加载相应页面
  go (path) {
    // 变更地址栏 URL
    window.history.pushState({}, '', path)
    // 加载页面
    this.load(path)
  }

  // 加载 path 路径的页面
  load (path) {
    // 首页
    if (path === '/') path = '/home'
    // 创建页面实例
    const view = new routes[path]()
    // 调用页面方法，把页面加载到 document.body 中
    view.mount(document.body)
  }
}

// 导出 router 实例
export default new Router()

然后在src的view下建立home和about两个文件夹，并在俩文件夹下新建index.js文件和style.css文件

// home下的index.js举例
// 引入 router
import router from '../../router'

// 引入 html 模板，会被作为字符串引入
import template from '../../../index.html'

// 引入 css, 会生成