webpack 各種babel 轉碼

今天總結一下webpack 各種轉碼工具 的操作方法。 一、基本命令：

      webpack         // 最基本的啟動webpack的方法      webpack -w      // 提供watch方法；即時進行打封裝更新      webpack -p      // 對打包後的檔案進行壓縮      webpack -d      // 提供source map，方便調式代碼

二、ES6 轉碼 ES5

    安裝 babel-loader：     # npm install babel-loader --save-dev    安裝轉碼規則：           # npm install babel-preset-es2015 --save-dev    webpack調用Babel的API進行轉碼:    # npm install --save-dev babel-core    ES7不同階段文法提案的轉碼規則（共有4個階段），選裝一個    # npm install --save-dev babel-preset-stage-0    # npm install --save-dev babel-preset-stage-1    # npm install --save-dev babel-preset-stage-2    # npm install --save-dev babel-preset-stage-3   webpack.config.js 參考：   module:{      rules:[          {            test:/\.js$/,            exclude: /(node_modules|bower_components)/, // 防止將node_modules 中的js 轉碼            use:['babel-loader',]          },      ]   }

重點內容： 還要在目錄中建立一個 .babelrc 檔案，裡面寫上：

{ "presets": [ "es2015" ] }

如果不想建立這個檔案，那麼webpack.config.js 中 module 可以這樣做：

module:{      rules:[          {            test:/\.js$/,            exclude: /(node_modules|bower_components)/, // 防止將node_modules 中的js 轉碼            use: [                    {                        loader: 'babel-loader',                        options: {                            presets: ['es2015']                        }                    },              ],          },      ]   }

二、css打包到js

安裝：

npm install --save-dev style-loader css-loader

webpack.config.js:

 module: {     rules: [       {         test: /\.css$/,         use: [           'style-loader',           'css-loader'         ]       }     ] }

js:

import 'your style'

三、less編譯

安裝：

npm install save-dev less less-loader

webpack.config.js:

  {    test:/\.less$/,    use:["style-loader",'css-loader','less-loader']  }

在js裡import 匯入 less檔案。