使用webpack編譯es6代碼的方法步驟
前言
團(tuán)隊(duì)使用的 webpack 功能很強(qiáng)大，有時(shí)候會(huì)碰到編譯失敗的情況，總得找工具的作者解決問(wèn)題，自己很少去追究原因，感覺(jué)對(duì)于 webpack 的認(rèn)知總是一知半解。因此，從本篇文章開(kāi)始，自己從零開(kāi)始配置 webpack，認(rèn)真體驗(yàn)一下配置過(guò)程。文章內(nèi)容過(guò)于簡(jiǎn)單，如果有 webpack 使用經(jīng)驗(yàn)的人，就不用往下看啦。
版本說(shuō)明
本文使用的 webpack 的版本為：4.30.0
開(kāi)始搭建
本文的目的是使用 webpack 完成 es6 的編譯，沒(méi)想到過(guò)程過(guò)于簡(jiǎn)單。
安裝 node 與 npm 鏡像
安裝 webpack 與 webpack-cli
打開(kāi)或者新建一個(gè)項(xiàng)目，使用命令行安裝 webpack 與 webpack-cli：
$ cnpm install --save-dev webpack-cli
安裝 es6 的編譯組件
使用命令行安裝 babel-loader：
$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack
創(chuàng)建文件目錄
我創(chuàng)建的文件目錄如下：
webpack-es6 |- /dist |- index.html |- /src |- index.js
定義打包的入口與出口
項(xiàng)目目錄下新建 webpack.config.js 文件，并按照文件目錄配置打包的入口和出口：
const path = require('path');
module.exports = {
entry: './src/index.js', // 定義入口 js ，也就是編譯前的 js
output:{
filename:'index.js', // 定義打包輸出的 js 的文件名
path:path.resolve(__dirname,'dist') // 輸出 js 的目錄
}
};
添加 js 文件的處理規(guī)則
在 webpack.config.js 文件中添加 js 文件的處理規(guī)則：
const path = require('path');
module.exports = {
entry: './src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}，
// 以下代碼為新添加代碼
module:{
rules:[
{
test: /\.js$/, // 匹配所有 js 文件
loader: 'babel-loader' // 使用 babel-loader 處理 js 文件
},
]
},
};
添加 npm 腳本
在 package.json 文件中添加 npm 腳本：
{
//... 省略代碼
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 添加此行，使用 build 命令代替 npx 命令
},
//... 省略代碼
}
配置完成
以上就完成了 webpack 打包 es6 的配置，此時(shí)的文件目錄如下：
webpack-es6 |- node_modules |- /dist |- index.html |- /src |- index.js |- package.json |- package-lock.json |- webpack.config.js
添加代碼
接下來(lái)我們添加代碼測(cè)試配置是否成功。
文件 ./src/index.js 添加代碼：
class Class{
constructor() {
this.str = 'success';
}
appendToBody(){
const p = document.createElement('p');
p.innerHTML = this.str;
document.body.appendChild(p);
}
}
const obj = new Class();
obj.appendToBody();
文件 ./dist/index.html 添加代碼：
</html> <body></body> <script src="./index.js"></script> </html>
編譯程序
運(yùn)行命令行
$ npm run build
打開(kāi) index.html ，如果頁(yè)面中有 success ，則說(shuō)明 es6 編譯完成。
總結(jié)
沒(méi)想到 webpack 編譯 es6 配置如此簡(jiǎn)單，下一步使用 webpack 編譯 postcss 。
參考鏈接
webpack 中文網(wǎng)：www.webpackjs.com/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序開(kāi)發(fā)報(bào):“app.json未找到”錯(cuò)誤的原因與解決方法
這篇文章主要介紹了微信小程序開(kāi)發(fā)中常見(jiàn)的“app.json文件內(nèi)容錯(cuò)誤”及其解決方案,錯(cuò)誤通常由核心文件路徑錯(cuò)誤或配置問(wèn)題引起,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
JS實(shí)現(xiàn)元素上下左右移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)元素上下左右移動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
appendChild主要是用來(lái)追加節(jié)點(diǎn)插入到最后；循環(huán)的時(shí)候由于不停的搬家導(dǎo)致length 在改變，改用for的話開(kāi)始的length已經(jīng)被固定，問(wèn)題就解決啦2013-07-07
BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)應(yīng)用小結(jié)
這篇文章主要介紹了BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
這篇文章主要介紹了淺談webpack對(duì)樣式的處理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
下面小編就為大家推薦一篇基于JSONP原理解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了bootstrap警告框示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
使用three.js可以方便的讓我們?cè)诰W(wǎng)頁(yè)中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關(guān)于利用Three.js如何實(shí)現(xiàn)陰影效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
JavaScript來(lái)實(shí)現(xiàn)打開(kāi)鏈接頁(yè)面的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript來(lái)實(shí)現(xiàn)打開(kāi)鏈接頁(yè)面的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
使用js在layui中實(shí)現(xiàn)上傳圖片壓縮
這篇文章主要介紹了使用js在layui中實(shí)現(xiàn)上傳圖片壓縮，layui 是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架,js上傳圖片壓縮百度有很多方法，,需要的朋友可以參考下2019-06-06