Webpack Uglify.js 不支援ES6語法

記錄一下前幾天踩的雷：

在terminal使用webpack指令做打包動作一切正常，但使用webpack -p做打包出現了Unexpected token (>) 的錯誤問題

google了一下發現原來是unglifyjs不支援es6語法，因此我寫的arrow function造成壓縮失敗。 只要安裝babel-preset-env

yarn add babel-preset-env --save -dev


並在.babelrc中設定:

{
"presets": ["env"]
}

重新執行webpack -p之後即可正常打包。

webpack 配置學習筆記

webpack 帶來的好處在此先不贅述， 我只針對文件配置作解釋，如有錯誤還請各位大大指正。

• context: 根路徑(絕對路徑)
• entry:  bundle的文件入口， 可傳入字串，陣列與物件
• output:  輸出結果描述，協助webpack編譯實體檔案， 其中包含- path: 輸出目錄(使用絕對路徑)
  – filename: 輸出文件名稱(不可使用絕對路徑)
  – publicPath: 輸出目錄的對應路徑 (亦即瀏覽器的訪問路徑)
• modules: 可以定義loaders , 例如babel-loader來協助我們轉譯ES2015語法

以下是一個簡單的webpack.config.js範例(官網):

{
  context: __dirname + "/app",
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  },

  loaders: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
  }]
}

publicPath 指的是最終瀏覽器的訪問路徑，因此如果我們bundle後的結果最終須輸出於CDN
那麼我們的publicPath就要指向該CDN網址。

如果只定義了babel-loader，那當然還不夠用，我們還是要安裝相依性套件:

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

安裝好套件後，我們必須在.babelrc 的文件中加上以下設定:
 { “presets“: [ “es2015″ ] }
  這是要告訴babel說，我們使用的是es2015語法。

以上大概就是簡單的webpack配置，我將會定期更新此文件，以期待自己能夠更深入了解Webpack

建置React-Redux開發環境

以下假設您已經安裝好npm or yarn等套件

1. 安裝全域套件create-react-app

npm install -g create-react-app

2. 接下來我們可以用該套件來建立我們的模板

create-react-app practice_01

3. 安裝完成後進入該資料夾

cd practice_01

4. 接著安裝相依性套件
npm install

5. 再來安裝redux套件

npm install redux
npm install react-redux

大功告成！

備註:

create-react-app 本身已經安裝了webpack , 若您需要做細部的config設定

可以執行 npm run eject ，但執行此命令後，就無法再回復原本乾淨的開發環境囉!