最近突然發現前端特別好玩，就當做給自己放個小假，試著記一點前端的筆記。

自學vue.js時遇到的webpack項目配置，感覺操作有點瑣碎，而且由于筆者看的教程的年代比較久遠，許多步驟和指令都已經有變化。

---

此處以在vscode環境下構建webpack項目為例

創建文件夾，用vscode打開文件夾。

在命令行內輸入npm init -y（注意，打開的文件夾和以后內部創建的文件都必須是英文，否則會報錯）；通過npm init -y 生成項目的配置文件package.json。（-y中的y是yes的縮寫）

運行結果中可以看出項目的信息

3. 在目錄中如此創建文件結構：

dist下的bundle.js文件是在下一步生成的，不要我們創建

然后我們在main.js中隨便寫一句測試代碼：

//main.js console.log("hello world")

4. 全局安裝webpack，在命令行中執行 npm I webpack -g；然后在項目中測試webpack，將main.js裝換成bundle.js（全局打包），指令為webpack ./src/main.js -o ./dist/bundle.js

以后的安裝經常會有warning，一般直接忽略就行

5. 在index.html文件中導入bundle.js文件作為腳本代碼（也就是在index.html的head標簽下加入<script src="../dist/bundle.js"></script>），并在瀏覽器中查看效果。

看到了hello world的打印信息，說明之前的步驟沒問題

6. 因為懶，每次全局打包都需要輸入webpack <源文件> -o <目標文件>的指令，我們希望可以直接按webpack就可以把main.js打包到dist文件夾的bundle.js中。為了做到這種效果，我們在與package.json同級的目錄下創建一個webpack配置文件：webpack.config.js，內部代碼與注釋如下：

// 由于webpack是基于Node進行構建的，所以在webpack的配置文件中，任何合法的Node的代碼都是支持的 var path = require("path") // 當以命令行形式運行 webpack 或 webpack-dev-server 的時候， 工具會發現， 我們并沒有提供要 // 打包的文件的入口和出口文件，此時，他會檢查項目根目錄中的配置文件，并讀取這個文件，就拿到了 // 導出的這個配置對象，然后根據這個對象，進行打包構建 module.exports = {entry: path.join(__dirname, "./src/main.js"), // 入口文件output: { // 指定輸出選項path: path.join(__dirname, "./dist"), // 指定輸出路徑filename: "bundle.js" // 指定輸出文件的名稱} }

然后我們在終端直接運行webpack指令就可以達到和輸入webpack <源文件> -o <目標文件>一樣的效果。

7. 我們可以通過配置webpack文件來設置快捷指令來快速全局打包，但是每次改完代碼都要輸入 webpack 打包，再在刷新瀏覽器觀察效果，這樣還是麻煩。為了更快更方便，我們還可以用一個神器插件 webpack-dev-server 來更加快速的調試代碼。安裝指令：npm i webpack-dev-server -D（-D中的D筆者認為是 package 中的 devDependencies 的D，意思是安裝到依賴庫的文件夾中）。為了避免后續的錯誤，建立再本地安裝如下兩個依賴庫：npm i webpack -D 和 npm i webpack-cli -D

---

webpack-dev-server的配置

承接上面的第7步，如果你已經完成了上述的7個步驟，就可以開始配置文件來達到使用懶人插件webpack-dev-server插件的目的。

安裝的注意事項

使用 webpack-dev-server這個工具， 來實現自動打包編譯項目入口文件（main.js）的功能。

運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴。

安裝完畢后，這個工具的用法，和webpack命令的用法完全一樣。

由于我們是在項目中，本地安裝的webpack-dev-server, 所以無法把它當做腳本命令，在powershell終端中直接運行（只有那些安裝到全局 -g 的工具，才能在終端中正常運行）。

注意：webpack-dev-server這個工具，如果想要正常運行，要求在本地項目中，必須本地安裝webpack（每次新開一個項目，都要安裝）。

通過npm run dev來執行腳本（也就是開啟實時渲染的功能）。

webpack-dev-server幫我們打包生成的bundle.js文件，并沒有保存到實際的物理磁盤上；而是直接托管到了電腦的內存中，所以，我們在項目根目錄中，根本找不到這個打包好的bundle.js。

我們可以認為，webpack-dev-server把打包好的文件，以一種虛擬的形式，托管到了我們的項目的根目錄中，雖然我們看不見，但是可以認為和dist src node_module平級，有一個看不見的文件叫做bundle.js。這么做的目主要是為了快。

上面的1-7在說一些注意事項，具體操作請看下面：

首先，我們需要把index.html中的引用腳本改一下，原來我們引用的JS文件是webpack打包生成在dist文件夾下的bundle.js，如果你認真地看了上面的1-7的注意事項，你應該明白我們需要引用的那個JS文件應該是托管在內存里面的bundle.js文件。所以我們需要把原來的代碼改成下面青色框框中的。

在瀏覽器下輸入http://localhost:8080/src就可以看到效果了。

其中的8080是默認的端口，可以在配置文件中修改。

常用命令

• 打開項目后，為了打開前端服務器讓webpack-dev-server實時渲染我們的html文件，需要運行的指令為：npm run dev。（在后面的文件配置好后再運行這個指令）
• 讓前端服務器停止的指令為Ctrl+C

文件配置

• package.json中配置

為了在控制臺中執行dev命令（即成功運行npm-run-dev指令），我們需要在package.json文件中的scripts下加入對象"dev": "webpack-dev-server"

2. 一些方便操作，提高運行效率的參數：

參數說明：

我們把2.下的配置參數全部清空，再嘗試一種新的配置文件的方式：

• 在webpack.config.js

將上述的--<指令> <參數>的形式寫成鍵值對就行了

---

style-loader與css-loader

我們先在src文件夾下創建一個存放css文件的文件夾css，在這個文件夾中創建一個決定主頁面樣式的樣式表index.css，把網頁主體的背景色改成筆者最喜歡的9999ff。

/* index.css */ html, body {background-color: #9999ff; }

然后我們在main.js中引用它：

//main.js // 項目的JS入口文件 import "./css/index.css" console.log("hello world");

輸入npm run dev，最后發現報錯了。這是因為webpack并不負責解析編譯css文件。我們按下Ctrl+C退出，試圖尋求解決方法。

在webpack項目中，我們如果需要在index.js中加載外部的CSS樣式表，可以在main.js中加入import語句導入外部的CSS樣式表的相對路徑，但是這樣我們再啟動瀏覽器時會報錯。原因是webpack本身就只是為了JavaScript，CSS樣式表它解析不了，所以無法import。

此時我們需要安裝第三方庫style-loader與css-loader來解決，安裝指令：npm i style-loader css-loader -D。

安裝完后，我們需要更改配置文件，來讓css樣式表被索引時能找到上面的兩個庫作為webpack的loader。

加入module模塊，其中加入一個對象rule，rule的值是一個列表，其中的/.css$/是正則表達式，用來匹配所有的以.css結尾的文件發出的請求，如果匹配到了，那么就使用use對象中的兩個庫（兩個庫是從右往左索引的）

最后輸入npm run dev看看有沒有成功：

符合預期

至此，webpack項目的基本的配置工作完成。

待更新......

總結

以上是生活随笔為你收集整理的vscode中安装webpack_webpack项目配置流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。