溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天接觸了webpack，第一次使用webpack進行轉碼，竟然稀里糊涂就成功了，哈哈。
下面附上流程
創建個文件夾，初始化一下，首先全局安裝webpack
npm install webpack --save-dev
然后安裝babel
npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader
在當前文件夾內執行安裝，然后創建兩個文件夾一個src作為源文件夾，一個bin，保存生成的文件夾的列表
在src文件夾內創建一個文件app.js，里面寫入現在瀏覽器不全支持的es6代碼
let a = 111; let b = 222; var xxx = (c,d) => c*d; console.log(xxx(a,b));
然后在根目錄創建一個文件名為webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
}
}
然后再創建一個用于babel調用的文件，名為.babelrc
里面寫入
{ "presets": [ "es2015" ] }
然后在當前目錄打開cmd，
運行命令 webpack
如果出現綠色的，證明成功了
然后去bin目錄里面找到app.bundle.js發現里面下面會有這段代碼
function(module, exports) {
"use strict";
var a = 111;
var b = 222;
var xxx = function xxx(c, d) {
return c * d;
};
console.log(xxx(a, b));
證明轉碼成功~~~~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
