webpack搭建專案2021-02-28-有解無憂

部門新來小學妹找我,想學webpack幫她男朋友做專案,這樣她男朋友就有時間陪她了,我雖然很忙,還是放下來手中的作業,開始搭建這樣一個專案,程序記錄如下:
在這里插入圖片描述

1.準備作業

我默認你已經安裝了node.js,并且你的網路處于暢通的狀態

2. 初始化專案

1.創建一個檔案夾,以后所有的操作都是在這個檔案夾中進

用vscode打開后的檔案夾狀態

-在檔案夾中創建
在這里插入圖片描述

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
       1213212313
    </div>
    <script src="/dist/main.js"></script>
</body>
</html>
// webpack.config.js
var path = require('path');
var config ={
    entry:{
        main:"./main"
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    }
}

module.exports = config;
其他檔案 , src main.js和index.js暫時是空檔案

2.打開一個終端使用npm init命令初始化專案生成package.json檔案執行程序
在這里插入圖片描述

{
  "name": "fordemoone",
  "version": "1.0.0",
  "description": "learn notes",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  },
  "author": "鄭文浩",
  "license": "ISC",
  "devDependencies": {
  }
}

這個時候你獲取的檔案可能是這樣的,但是這事實上是才剛剛開始

3.正式開始安裝三個重要依賴

    "webpack"
    "webpack-cli"
    "webpack-dev-server"

首先是npm install webpack --save -dev

其次是npm install -g webpack-dev-server

執行之后的結果最后下載 npm run -D webpack-cli

這個時候的package檔案已經變化了

{
  "name": "fordemoone",
  "version": "1.0.0",
  "description": "learn notes",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  },
  "author": "鄭文浩",
  "license": "ISC",
  "devDependencies": {
   "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

按說這個時候應該已經可以通過npm run dev 啟動專案了,
但是啟動的時候報錯了,這個錯誤很簡單,就是版本的問題
在這里插入圖片描述

在別的地方找到了解決方法
If you upgrade webpack to 5. *, and webpack cli to 4. *, an error will be reported:

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

Temporary solution: Back off webpack cli to version 3. * for example:

“webpack-cli”: “^ 3.3.12”
所以我們需要卸載后重新安裝低版本webpack-cli執行
npm uninstall webpack-cli
npm install webpack-cli@3 -D
修改之后的package.json

{
 "name": "fordemoone",
 "version": "1.0.0",
 "description": "learn notes",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "webpack-dev-server --open --config webpack.config.js"
 },
 "author": "鄭文浩",
 "license": "ISC",
 "devDependencies": {
   "webpack": "^5.24.2",
   "webpack-cli": "^3.3.12",
   "webpack-dev-server": "^3.11.2"
 }
}

然后重啟npm run dev 專案啟動成功
在這里插入圖片描述

4 總結,雖然上面寫的程序看似順利,但是作者在安裝的程序中也是遇到了眾多的難題都是博客堆里摸爬滾打過來的唯一的經驗就是敢于嘗試,擅于甄別一些高質量的教程,避免走彎路,讓我們開始懷疑自己的智商,好在最終我還是完成了任務,想到學妹明天就能早早的下班和她男朋友開心的玩耍了,我感覺好欣慰

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264846.html

標籤：其他

上一篇：什么是gojs？

下一篇：什么是konva.js？