Vue - Webpack

一、什么是 Webpack

　　从本质上讲，webpack 是一个现代的 javaScript 应用的静态模块打包工具。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

　　webpack 是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过 loader 转换，任何形式的资源都可以当做模块，比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等；

　　伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到 WebApp 模式。它们运行在现代浏览器里，使用 HTML5、CSS3、ES6 等新的技术来开发丰富的功能呢，网页已经不仅仅是完成浏览器的基本需求；WebApp 通常是一个 SPA（单页面应用），每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JS 代码，这给前端的开发流程和资源组织带来了巨大的挑战。

　　前端开发和其它开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

二、前端模块化

　　前端模块化的一些方案：AMD、CMD、CommonJS、ES6。

　　在ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

　　而webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中可以被当做模块来使用，这就是webpack中模块化的概念。

ES6 模块

　　EcmaScript标准增加了 JavaScript 语言层面的模块体系定义。ES6 模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS 和 AMD 模块，都只能在运行时确定这些东西。

import "jquery";
export function doStuff() { }
module "localModule" { }

优点

• 容易进行静态分析
• 面向未来的 EcmaScript 标准

缺点

• 原生浏览器端还没有实现该标准
• 全新的命令，新版的 NodeJS 才支持

实现

• Babel

大家期望的模块系统：可以兼容多种模块风格，尽量可以利用已有的代码，不仅仅只是 JavaScript 模块化，还有 CSS、图片、字体等资源也需要模块化。

三、安装 Webpack

WebPack 是一款模块加载器兼打包工具，他能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理。

安装：

• npm install webpack -g
• npm install webpack-cli -g

测试是否安装成功：

• webpack -v
• weipack-cli -v

四、配置

创建 webpack.config.js 配置文件

• entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
• output：输出，指定 WebPack 吧处理完成的文件放置到指定路径
• module：模块，用于处理各种类型的文件
• plugins：插件，如：热更新、代码重用等
• resolve：设置路径指向
• watch：监听，用于设置文件改动后直接打包

module.exports = {
  entry: "",
  output: {
    path: "",
    filename: ""
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: ""}
    ]
  },
  plugins: {},
  resolve: {},
  watch: true
}

直接 webpack 打包运行！

五、使用 Webpack

1、创建项目

2、创建一个名为 modules 的目录，用于放置 JS 模块等资源文件

3、在 modules 下创建模块文件，如 hello.js 用于编写 JS 模块相关代码

// 暴露一个方法
exports.sayHi1 = function () {
    document.write("<h1>Hello SY11111!!!</h1>")
};
exports.sayHi2 = function () {
    document.write("<h1>Hello SY22222!!!</h1>")
};
exports.sayHi3 = function () {
    document.write("<h1>Hello SY33333!!!</h1>")
};
exports.sayHi4 = function () {
    document.write("<h1>Hello SY44444!!!</h1>")
};

4、在 modules 下创建一个名为 main.js 的入口文件，用于打包时设置的 entry 属性

var hello1 = require("./hello"); // require 导入一个模块，然后就可以直接调用模块中的方法了
hello1.sayHi1();// 调用方法
hello1.sayHi3();// 调用方法

5、在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包

module.exports = {
    entry: './modules/main.js', // 入口文件
    output: { // 输出
        filename: './js/bundle.js'
    }
};