重構之路 開始配置webpack

現在開始建立專案了，安裝node什麼的一大堆我就不說了，網上很多，我這裡使用的是node版本v10.15.0，yarn的版本是v1.12.3。

首先在建立的目錄下面執行

yarn init -y

yarn add webpack webpack-cli -d

我這裡使用的版本是webpack4.29.0，然後在目錄下建立webpack.config.js這個檔案，在根目錄下建立src資料夾public資料夾，src下建立index.js，public下建立index.html。然後在index.js裡寫個alert(1);。等下我們來執行這個**。

目前的目錄結構如下

接下來就是babel了，babel這個地方那可是真複雜啊，這裡說的不是難，是複雜，各個版本的babel和很多很多的js相容babel，我在學這塊的時候那頭髮都掉一大把。我在這個專案裡用的是babel7，接下來實現在網頁上執行js。

首先執行

yarn add babel-loader @babel/core @babel/preset-env -d

然後再執行，這樣js就可以自動引入到html檔案裡了。

yarn add html-webpack-plugin -d

const path =

require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports=
, module:}]
}]},
plugins:
[new
htmlwebpackplugin(})]}

我們在module下的rules裡這樣修改

rules:[}]}]

現在最簡單的乙個webpack配置已經做好了，當然我前面說babel複雜，當然不止現在這些，後面還需要再進行配置。

重構之路 開始配置webpack

現在開始建立專案了，安裝node什麼的一大堆我就不說了，網上很多，我這裡使用的是node版本v10.15.0，yarn的版本是v1.12.3。首先在建立的目錄下面執行yarn init yyarn add webpack webpack cli d我這裡使用的版本是webpack4.29.0，然後在...

重構之路 webpack配置es6語法

之前已經寫好了最簡單的乙個webpack配置，並且已經可以執行js了，但是，新時代的前端肯定要寫es6啊，但是我們在index.js裡寫上es6的語法時，比如 使用es6裡的set和擴充套件運算子來實現陣列去重 varset new set 1 2,2 3,3 4,4 5,5 console.log...

webpack 從零開始配置

參考 一 開啟專案 1 專案初始化 npm init 2 安裝 webpack模組 npm install webpack webpack cli g 全域性安裝 如果專案不使用webpack命令，應該是可以不用全域性安裝webpack的 npm install webpack webpack cl...