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 輸入了幾十次，然后就很熟練的記住了，是不是很神奇，不能像記憶碎片里的男主角，一分鍾就忘了，什么玩意。

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