安裝nodejs

根目錄下運行

npm init

根據提示輸入項目相關信息，然后運行：

npm install

安裝webpack

在項目根目錄下運行

npm install webpack --save-dev

安裝babel loader 和 轉碼規則

在根目運行命令：

npm install babel-loader --save-dev npm install babel-preset-es2015 --sava-dev //安裝轉碼規則

babel loader 可以將ES6的代碼編譯成ES5

創建webpack配置文件

在源代碼目錄創建 webpack.config.js 文件，內容如下:

var path = require('path'); //加載nodejs的路徑處理模塊 module.exports = {entry: './es6/index.js',output: {path: __dirname, //__dirname是一個nodejs變量，表示當前js文件所在的目錄filename: 'bundle.js'},module: {loaders: [{test: path.join(__dirname, 'es6'), //配置文件目錄下的es6文件夾作為js源代碼文件夾，所有源代碼一定要放在該文件夾下loader: 'babel-loader' ,query: {presets: ['es2015']}}]} };

entry和output都是通用的配置，與ES6無關，這里不展開。重點在loaders配置，loader和query一定要配置

注意：test配置指定了哪些是ES6代碼，可以指定一個文件夾，則所有源代碼一定要放在該文件夾下，或者用一個 正則表達式指定哪些是ES6代碼。只有ES6代碼，才會編譯。

之后便可以編寫ES6寫法的js，打包運行了

參考文檔

基于webpack使用ES6新特性

使用webpack進行ES6開發

Webpack 中文指南

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的使用webpack打包ES6代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。