使用webpack編譯es6代碼的方法步驟

前言

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為革吉等服務(wù)建站，革吉等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為革吉企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

團隊使用的 webpack 功能很強大，有時候會碰到編譯失敗的情況，總得找工具的作者解決問題，自己很少去追究原因，感覺對于 webpack 的認知總是一知半解。因此，從本篇文章開始，自己從零開始配置 webpack，認真體驗一下配置過程。文章內(nèi)容過于簡單，如果有 webpack 使用經(jīng)驗的人，就不用往下看啦。

版本說明

本文使用的 webpack 的版本為：4.30.0

開始搭建

本文的目的是使用 webpack 完成 es6 的編譯，沒想到過程過于簡單。

安裝 node 與 npm 鏡像

安裝 node
安裝 npm 淘寶鏡像

安裝 webpack 與 webpack-cli

打開或者新建一個項目，使用命令行安裝 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

定義打包的入口與出口

項目目錄下新建 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 的配置，此時的文件目錄如下：

webpack-es6
 |- node_modules
 |- /dist
  |- index.html
 |- /src
  |- index.js
 |- package.json
 |- package-lock.json
 |- webpack.config.js

添加代碼

接下來我們添加代碼測試配置是否成功。

文件 ./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>

編譯程序

運行命令行

$ npm run build

打開 index.html ，如果頁面中有 success ，則說明 es6 編譯完成。

總結(jié)

沒想到 webpack 編譯 es6 配置如此簡單，下一步使用 webpack 編譯 postcss 。

參考鏈接

webpack 中文網(wǎng)：www.webpackjs.com/

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標題：使用webpack編譯es6代碼的方法步驟
本文URL：http://vcdvsql.cn/article44/pdsshe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站設(shè)計公司、做網(wǎng)站、網(wǎng)站設(shè)計、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

使用webpack編譯es6代碼的方法步驟