ES6+轉ES5（webpack+babel、指定多個js文件、自動注入）

　　接續上篇ES6+轉ES5，本篇將使用webpack和babel將多個不一樣目錄下指定的多個ES6+語法的js文件編譯爲ES5，並將編譯後的文件配置注入對應的html文件。
　　所需環境node、npm、設置淘寶鏡像請參考上篇進行安裝，地址：http://www.javashuo.com/article/p-obyhzmso-co.html

1、新建項目，目錄以下

2、執行命令初始化項目

　　cnpm init -y
　　執行成功後會生成文件：package.json

3、執行命令安裝webpack

　　cnpm install webpack --save-dev
　　（有個坑）在webpack3中，webpack自己和它的CLI之前都是在同一個包中，但在第4版中，二者已分開管理，因此要單獨安裝其腳手架。
　　執行命令安裝webpack-cli
　　cnpm install webpack-cli --save-dev

4、執行命令安裝如下3個用於處理js的包

　　cnpm install --save-dev babel-loader @babel/core @babel/preset-env
　　babel-loader：對使用了ES2015+語法的.js文件進行處理。
　　babel-core：提供一系列api。當webpack使用babel-loader處理文件時，babel-loader就調用了babel-core的api。
　　babel-preset-env：告訴babel使用哪一種轉碼規則進行文件處理。babel有幾種規則均可以實現對ES6語法的轉碼，如babel-preset-es201五、babel-preset-latest、babel-preset-env，不過官方現已建議採用babel-preset-env。

5、執行命令安裝全局墊片插件：

　　cnpm install babel-polyfill --save-dev

6、執行命令安裝局部墊片插件：

　　cnpm install @babel/runtime --save-dev
　　cnpm install @babel/plugin-transform-runtime --save-dev
　　墊片：Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。舉例來講，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

7、根目錄下新建文件：webpack.config.js

　　這個js配置文件的注意事項我都寫上了註釋，後面我會將其所有內容貼上來。

8、根目錄下建一個.babelrc文件，內容爲

{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["> 1%", "last 2 versions"]
            }
        }]
    ],
    "plugins": ["@babel/transform-runtime"]
}

　　意思是打包後的代碼要支持1%以上的瀏覽器並支持瀏覽器的上2個版本
　　此時執行命令webpack就能夠了

9、想要配置爲html文件自動注入因此生成的包還須要安裝如下插件

　　執行命令安裝html-webpack-plugin插件
　　cnpm install html-webpack-plugin --save-dev
　　安裝完成後執行webpack便可
　　注意：若是webpack打包時報錯Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
　　解決辦法
　　執行命令cnpm link webpack --save-dev
　　而後在執行webpack就能夠了
　　附上最後生成文件後的目錄結構圖：

附上webpack.config.js所有內容 

//爲了使用插件，須要將require()其添加到plugins陣列中。使用new運算符調用插件來建立插件的實例。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用於訪問內置插件
const path = require('path');
module.exports = {
    entry: { //入口配置
        index: './src/index.js',
        ctrl: './ctrls/ctrl.js'
    },
    // 這裏[]裏的name就是app和search也就是entry裏的key值 
    //  這裏[hash:5]會隨機生成一個版本號做爲你的打包js版本 
    //  建議最後一次打包才加上.[hash:5] 不然每次打包都同一個文件都會生成新的版本號不一樣的文件
    output: { //出口配置
        // filename: '[name].[hash:5].js',
        filename: '[name].js',
        path: __dirname + '/dist' // 生成新文件的地址
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/, // 處理以.jsx或.js結尾的文件
            use: {
                loader: "babel-loader", // 用babel-loader處理
                options: {
                    "presets": [
                        ["@babel/preset-env", {
                            "targets": {
                                "browsers": ["> 1%", "last 2 versions"]
                            }
                        }]
                    ]
                }
            }
        }]
    },
    //html-webpack-plugin生成器經過自動注入全部生成的包爲應用程序生成HTML文件
    plugins: [
        new HtmlWebpackPlugin({ // 地址爲output對應的path地址dist
            template: './src/index.html', //處理模板
            filename: '../index.html' //生成模板
            // 無chunks參數默認所有注入
        }), new HtmlWebpackPlugin({
            template: './src/a.html', //處理模板
            filename: '../views/view1.html', //生成模板
            chunks: ['index'] // 只引入index.js
        })
    ]
}

共勉，望鞭策！