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

發(fā)布時間：2020-09-25 14:31:38 來源：腳本之家閱讀：220 作者：NingBo 欄目：web開發(fā)

前言

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

版本說明

本文使用的 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 編譯完成。

總結

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

參考鏈接

webpack 中文網：www.webpackjs.com/

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關推薦

相關標簽