webpack打包，同時將ES6轉爲ES5，初探

 

webpack打包，同時將ES6轉爲ES5，第一次嘗試搞了一下午才弄好，全部的問題均來自ES6轉es5上面，可能天分不夠把，希望各大瀏覽器快點支持ES6吧！忽略nodejs安裝。

第一，新建一個項目文件夾，目錄相似下面，

第二，進入該目錄，按住shift+鼠標右鍵打開命令提示面板，package.json是經過命令npm init -y生成的。

第三，安裝3.10.0版本webpack，很差意思只有3.10.0嘗試成功，命令

npm install webpack@3.10.0 --save-dev

 

第四，安裝babel-core,babel-loader,babel-preset-env，能夠一個個安裝，也能夠一塊兒安裝：

npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-env --save-dev

第五，更改package內容以下：

{
  "name": "webpackes",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^3.10.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

主要增長一個，build命令，運行npm run build直接打包

第六，新建一個默認webpack.config.js打包js文件，內容以下：

const path = require('path');
module.exports = {
    entry:path.resolve(__dirname,'src/pixiEngine/Main.js'),
    output: {
        filename: 'bundle.js',
        path:path.resolve(__dirname,'build'),
    },
    module:{
        rules:[
            {
                test:/(\.jsx|\.js)$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            "env"
                        ]
                    }
                },
                exclude:path.resolve(__dirname,"node_modules"),
                include:path.resolve(__dirname,"src")
            }
        ]
    }
}

最須要注意的就是路徑，文件目錄裏必須有相應的路徑，若是沒有，會報錯，沒法打包。好比build目錄不存在就會報錯。

大功告成，運行npm run build

打包完成，最後打開build文件夾發現生成了一個bundle.js文件，便是最終打包出的文件。

機械式的生搬硬套也能夠學到不少東西，就好比說今天輸入npm install webpack 輸入了幾十次，而後就很熟練的記住了，是否是很神奇，不能像記憶碎片裏的男主角，一分鐘就忘了，什麼玩意。

第一次努力的嘗試，嘗試成功了，很欣慰。