一步步使用 webpack 第一篇：使用 webpack 編譯 es6 代碼

時間 2019-11-06

標籤步步使用 webpack 一篇編譯 es6 代碼欄目 JavaScript 简体版

原文原文鏈接

前言

團隊使用的 webpack 功能很強大，有時候會碰到編譯失敗的狀況，總得找工具的做者解決問題，本身不多去追究緣由，感受對於 webpack 的認知老是隻知其一;不知其二。所以，從本篇文章開始，本身從零開始配置 webpack，認真體驗一下配置過程。文章內容過於簡單，若是有 webpack 使用經驗的人，就不用往下看啦。javascript

版本說明

本文使用的 webpack 的版本爲：4.30.0css

開始搭建

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

安裝 node 與 npm 鏡像

安裝 node
安裝 npm 淘寶鏡像

安裝 webpack 與 webpack-cli

打開或者新建一個項目，使用命令行安裝 webpack 與 webpack-cli：java

$ cnpm install --save-dev webpack-cli
複製代碼

安裝 es6 的編譯組件

使用命令行安裝 babel-loader：node

$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack
複製代碼

建立文件目錄

我建立的文件目錄以下：webpack

webpack-es6
  |- /dist
    |- index.html
  |- /src
    |- index.js
複製代碼

定義打包的入口與出口

項目目錄下新建 webpack.config.js 文件，並按照文件目錄配置打包的入口和出口：git

const path = require('path');
module.exports = {
    entry: './src/index.js', // 定義入口 js ，也就是編譯前的 js
    output:{
        filename:'index.js', // 定義打包輸出的 js 的文件名
        path:path.resolve(__dirname,'dist') // 輸出 js 的目錄
    }
};
複製代碼

添加 js 文件的處理規則

在 webpack.config.js 文件中添加 js 文件的處理規則：es6

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 腳本：github

{
    //... 省略代碼
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" // 添加此行，使用 build 命令代替 npx 命令
    },
    //... 省略代碼
  }
複製代碼

配置完成

以上就完成了 webpack 打包 es6 的配置，此時的文件目錄以下：web

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/