安裝nodejs

根目錄下運(yùn)行

npm init

根據(jù)提示輸入項(xiàng)目相關(guān)信息，然后運(yùn)行：

npm install

安裝webpack

在項(xiàng)目根目錄下運(yùn)行

npm install webpack --save-dev

安裝babel loader 和 轉(zhuǎn)碼規(guī)則

在根目運(yùn)行命令：

npm install babel-loader --save-dev npm install babel-preset-es2015 --sava-dev //安裝轉(zhuǎn)碼規(guī)則

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

創(chuàng)建webpack配置文件

在源代碼目錄創(chuàng)建 webpack.config.js 文件，內(nèi)容如下:

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

entry和output都是通用的配置，與ES6無(wú)關(guān)，這里不展開(kāi)。重點(diǎn)在loaders配置，loader和query一定要配置

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

之后便可以編寫(xiě)ES6寫(xiě)法的js，打包運(yùn)行了

參考文檔

基于webpack使用ES6新特性

使用webpack進(jìn)行ES6開(kāi)發(fā)

Webpack 中文指南

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。