webpack打包

ES6模塊系統有 AMD CMD
可是沒有任何解釋器,瀏覽器實現了模塊系統
怎麼使用他們？

靠打包工具來實現，打包工具會解析他的模塊系統

將依賴打包成一個文件

 

babel6以前打包都在一個包 之後就分開打包了

主要的babel-core 其餘的轉義的工做都以插件的方式提供

因爲要打的包太多了,就出現了presets,它是一組插件的集合

 

首先須要安裝nvm來管理node環境

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
而後添加

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
進配置文件 .bashrc或者其餘相似的配置文件中

安裝 node 
nvm install node的版本號

安裝了node以後就可使用 npm了這是node的包管理工具
只要安裝了node,這個工具就能夠直接使用了

新建工做目錄
npm init  將當前目錄變爲 node 環境的目錄  它會建立 package.json 文件

npm i babel-core --save-dev 安裝babel-core --save-dev 會自動保存在 package.json文件中
這樣在其餘地方使用的時候 直接 npm i 就會幫助咱們把全部東西都安裝好
npm i webpack-cli
npm i babel-preset-es2015 --save-dev

npm i babel-preset-es2016 --save-dev
npm i babel-polyfill --save-dev
npm i babel-plugin-transform-decotators --save-dev
npm i webpack --save-dev 由於須要用到他的一些插件
npm i babel-loader --save-dev

 

建立webpack的配置文件 webpack.conf.js

var path=require('path');
var webpack=require('webpack')
module.exports={ // cmd 的語法
           entry:'./index.js', // 入口文件
           output:{ //入口文件輸出配置
           path:path.join(__dirname,'dist'),//拼接目錄
           filename:'app.js'
},

         watch:true,  自動監聽  改變了源文件以後會自動從新打包,不須要每次都手動輸入打包命令
module:{
       loaders:[ // 加載器配置
                 {
                   test:/\.js$/, // 什麼樣的文件
                   exclude:'node_modules', //不包括這裏面的文件  這裏好像要是決定路徑
                   loader:'babel', //使用babel 必須是字符串 不能是列表

                   query:{ // 也能夠在query裏面實現也能夠在.babelrc裏面寫(同目錄下)
                          presets:['es2016','es2015'], //presets
                          plugins:['transform-decorator-legacy'] # 可以使用ES7裏面的裝飾器
                   } //提示要裝一個插件
              }
         ]
    }
}

也能夠不在這裏面填寫 query 項而在 .babelrc裏面填寫要加載的插件集

{     

        "presets":["es2015","es2016"]
        "plugins":["transform-decorator-legacy"]

}

執行 webpack -d(表示debug)--config webpack.conf.js   就會在dist目錄下面生成app.js文件 

若是遇到 The node API for `babel` has been moved to `babel-core`
請將loader改成'babel-loader'

若是要使用裝飾器
npm install babel-plugin-transform-decorators-legacy --save-dev  
而後在.babelrc裏面加上transform-decorators-legacy便可