webpack如何編譯ES6打包

前言：隨着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 有兩個屬性：

1. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
2. 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方法