前言

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

版本說明

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

開始搭建

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

安裝 node 與 npm 鏡像

安裝 node
安裝 npm 淘寶鏡像

安裝 webpack 與 webpack-cli

打開或者新建一個(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 

添加代碼

接下來我們添加代碼測(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();