記錄前端繼承開發環境的配置步驟，使用到npm + node + webpack + babel + js壓縮工具，完成前端專案建立+外掛下載+模組化開發+壓縮打包測試。

1 安裝node+npm

可以直接去node官網下載node然後安裝，網上有很多教程所以不再介紹，這篇文字主要寫開發環境的配置
安裝完成後輸入

node -v
npm -v

檢視版本號確認是否安裝成功
此外因為npm映象是在國外，所以使用預設下載的話可能速度非常慢，我們可以修改映象連結

npm config set registry "http://registry.npm.taobao.org" 
npm config list
 
  //可以檢視配置

新建一個測試資料夾，進入，shift+滑鼠右鍵（windows環境）開啟命令列視窗，輸入npm init初始化，發現新增了一個package.json檔案，這個就是我們專案的配置檔案。npm會根據其中的配置管理依賴項。
隨後執行npm install安裝依賴，目錄中多了一個 node_modules 資料夾，裡面是一些初始的依賴，需要注意的是如果我們使用的IDE是 WebStrom 的話需要右鍵該資料夾然後 標記目錄為->排除 ，不然開啟專案時IDE會去檢索該資料夾，可能造成卡死的狀態。

2 安裝webpack，babel-core，babel-preset-es2015，babel-loader

下一步可以在命令列鍵入

npm install --save-dev webpack babel-core babel-preset-es2015 babel-loader

去安裝webpack和babel系列，babel每個外掛的區別可以在網上查到
隨後我們可以發現package.json同步更新了

3 配置webpack

最後我們就可以配置webpack來完成開發環境的搭建，新建webpack.config.js檔案，按照自己的專案修改下面的內容即可。

/**
 * webpack.config.js
 **/

//使用path定位絕對路徑
var path = require
 
('path');
var webpack = require('webpack');

module.exports = {
    //修改上下文，之後entry就可以寫相對路徑
    context: path.resolve(__dirname, './js'),
    // 當entry是個陣列的時候，裡面同樣包含入口js檔案，另外一個引數可以是用來配置webpack提供的一個靜態資源伺服器，webpack-dev-server。
    // webpack-dev-server會監控專案中每一個檔案的變化，實時的進行構建，並且自動重新整理頁面
    entry: [
        //'webpack/hot/only-dev-server',
        './main.js'
    ],
    // 當我們在entry中定義構建多個檔案時，filename可以對應的更改為[name].js用於定義不同檔案構建後的名字
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    // 關於模組的載入相關，我們就定義在module.loaders中。
    // 這裡通過正則表示式去匹配不同字尾的檔名，然後給它們定義不同的載入器。
    // 比如說給less檔案定義串聯的三個載入器（！用來定義級聯關係）
    // 此外，還可以新增用來定義png、jpg這樣的圖片資源在小於10k時自動處理為base64圖片的載入器：
    // { test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            //或者在根目錄下新建.babelrc檔案輸入
            // {
            //   "presets": ["es2015"]
            // }
            query: {
                presets: ["es2015"]
            }
        }
            //{ test: /\.css$/, loader: "style!css" },
            //{ test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
        ]
    },
    // webpack在構建包的時候會按目錄的進行檔案的查詢，resolve屬性中的extensions陣列中用於配置程式可以自行補全哪些檔案字尾
    // 然後我們想要載入一個js檔案時，只要require(‘common’)就可以載入common.js檔案了
    //resolve:{
    //    extensions:['','.js','.json']
    //}
    // 當我們想在專案中require一些其他的類庫或者API，而又不想讓這些類庫的原始碼被構建到執行時檔案中，這在實際開發中很有必要
    // 這樣我們就可以放心的在專案中使用這些API了：var jQuery = require(“jquery”);
    // externals: {
    //    "jquery": "jQuery"
    // }
    plugins: [
        //js壓縮外掛
        new webpack.optimize.UglifyJsPlugin()
    ]
};

/**
 * config.json
 **/

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "author": "jiangzilong",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  }
}

附上專案結構

其中build/bundle.js就是我們打包並壓縮的js檔案，最後在html中引入該script即可
另外對於模組化的格式可以參考：

//b.js
module.exports = {
    print: (msg) => console.log(msg)
}

//main.js
var $ = require('jquery');
var b = require('./b.js');

b.print(300);
$("#div").text("hello world");