前言：隨着ES的普及我們越來越多的開始使用ES6的語法了，當然也隨着mvvm框架的流行少不了js模塊化，那js模塊化又有那些呢
在很早的時候大家都用的命名空間，現在也有人用（庫名.類別名.方法名）
后來出現了CommonJS、AMD、CMD、UMD，現在流行ES 6 module
CommonJS的基本介紹：
一個文件為一個模板，通過module.exports暴露模塊接口，通過require引入模塊，同步執行
規范：http://wiki.commonjs.org/wiki/Modules/1.1.1
AMD的基本介紹：
全稱：Async Module Definition，使用define定義模塊，使用require加載模塊，常用庫RequireJS，依賴前置、提前執行
規范：https://github.com/amdjs/amdjs-api/wiki/AMD
CMD的基本介紹：
全稱：Common Module Definition，一個文件做為一個模塊，使用define來定義一個模塊、使用require來加載一個模塊，代表作SeaJS，盡可能地懶執行
規范：https://github.com/cmdjs/specification/blob/master/draft/module.md
UMD的基本介紹：
全稱：Universal Module Definition
叫做通用解決方案，基本三個步驟：判斷是否支持AMD、是否支持CommonJS、如果都沒有使用全局變量
ES6 M 基本介紹：
全稱：EcmaScript Module
一個文件一個模塊，export/import
那Webpack支持哪些打包呢？
AMD(RequireJS)，ES Modules（推薦的），CommonJS，常用的就是后兩種
-----------------------下面開始-------------------------------
環境准備：node npm webpack
第一步安裝webpack：cmd里執行 npm install webpack -g
我的現在裝的是最新版4.31版本
如果版本低的可以先uninstall再安裝
webpack的核心是：Entry、Output、Loaders、Plugins都在webpack.config.js文件里配置
Entry：代碼的入口，也是打包的入口，可以是單個，也可以是多個
Output：打包成的文件，也可以是一個或多個
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js', //這里[]里的name就是app和search也就是entry里的key值
path: __dirname + '/dist'
}
};
// 寫入到硬盤：./dist/app.js, ./dist/search.js
Loaders：loader 讓 webpack 能夠去處理其他類型的文件，並將它們轉換為有效模塊，以供應用程序使用，以及被添加到依賴圖中。
注意：loader 能夠 import 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務執行器的可能並不支持。
在更高層面，在 webpack 的配置中 loader 有兩個屬性：
test屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。use屬性，表示進行轉換時，應該使用哪個 loader。
module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }Plugins：插件則可以用於執行范圍更廣的任務。包括：打包優化，資源管理，注入環境變量。
想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
在上面的示例中，html-webpack-plugin 為應用程序生成 HTML 一個文件，並自動注入所有生成的 bundle。
webpack打包可以有什么方式：1.命令 2.配置 3.第三方腳手架
最簡單的打包命令：
webpack app.js file.js //app.js是入口文件 file.js是打包后的文件
使用配置：
在你需要打包的項目文件夾下建一個webpack.config.js配置代碼如下
module.exports = {
entry: {
app: './app.js',
},
output: {
filename: '[name].[hash:5].js', //這里[hash:5]會隨機生成一個版本號作為你的打包js版本
}
};
然后在當前目錄下執行：webpack //就可以直接打包了
-------------------
打包都是很簡單的，那下面就是最關鍵的webpack如何編譯ES6/7的語法呢
這里我們就要用到Babel，執行下面兩條命令安裝babel-loader和preset（preset主要的作用就是指定我們的babel-loader打包成我們想要的樣子，preset可以進行配置）
npm install babel-loader@8.0.0-beta.0 @babel/core
npm install @babel/preset-env --save-dev
怎么配置preset？如下在webpack.config.js文件里
再介紹兩個重要插件，對編譯es6/7的語法很重要
安裝插件：
npm install babel-polyfill --save
Babel Polyfill：表示全局墊片，各個瀏覽器對標准的實現不一樣，用這個工具就可以統一方法，為應用准備的
安裝插件：
npm install @babel/runtime --save
npm install @babel/plugin-transform-runtime --save-dev
Babel Runtime Transform：局部墊片，為開發框架做准備的
怎么使用呢？
在webpack.config.js的文件同目錄下建一個.babelrc文件就是json
把webpack.config.js文件里options下的presets剪切到.babelrc文件里
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
],
"plugins": ["@babel/transform-runtime"]
}
這里要用標准的json數據格式
這時候就可以在cmd里執行：webpack
不管你js里用了什么的es6語法最后都會打包編譯成瀏覽器可以識別的js方法