webpack4系列教程（二）：創建項目，打包第一個JS文件

waterc 發布于2019-08-23 14:40 / 1081人閱讀

摘要：對于大多數項目，建議本地安裝。打包第一個文件首先，我們在根目錄下創建一個文件和一個文件夾。而中的屬性，表示入口的名稱，此處就是。接下來打開文件，來編寫一條命令執行的打包。

1. 創建項目 1.1 初始化一個項目

首先安裝nodejs，打開?nodeJs官網?直接下載安裝即可，安裝完畢后打開命令行工具，進入你的項目文件夾，執行

npm init 進行項目的初始化：

過程中會讓你填寫項目名、版本、描述、倉庫地址、關鍵字等信息，可以不填一路回車，執行完畢后會在根目錄下創建一個 package.json 文件，這樣就初始化結束了。

1.2 安裝webpack

由于在webpack4中已經不再默認安裝 webpacl-cli，所以我們要手動安裝，在命令行執行 npm i webpack webpack-cli -D 即可。對于大多數項目，建議本地安裝。這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級項目。

2. 打包第一個JS文件?

首先，我們在根目錄下創建一個?webpack.config.js 文件和一個src文件夾。然后在src中創建一個 main.js 文件，如下：

在 main.js 中寫一行?

alert("hello world")

然后打開 webpack.config.js ，進行webpack的配置：

const path = require("path")

let config = {
  mode: "none",
  entry: {
    main: path.join(__dirname, "./src/main.js")
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  }
}

module.exports = config

我們設置了一個名為 main 的入口，并以 src 下的 main.js 作為入口文件，然后輸出到根目錄下的 dist 文件夾中。

在webpack4中，我們需要設置 mode 屬性，用來決定當前是development還是production環境，webpack會根據此值來進行一些默認操作，兩種環境的不同配置后面的博文會詳解，這里我們設置為 "none" ，來避免默認操作。前文已經說過，path 是 nodeJs中的核心模塊用來操作路徑，__dirname 表示文件的當前路徑（此時為根路徑）。而 output中的filename屬性，[name] 表示入口的名稱，此處就是 main。

接下來打開 package.json 文件，來編寫一條命令執行webpack的打包。在 script 中添加：

"build": "webpack --config webpack.config.js --progress --colors"

webpack --config path/to/your/file/file.js 表示執行某個配置文件，--progress可以讓我們看到打包的進度， --colors 開啟命令行顏色顯示，更多的webpack命令參數大家可以另行查閱。

然后就可以在命令行執行：npm run build，執行完畢后，我們可以看到，在根目錄下多了一個 dist 文件夾并有一個 main.bundle.js文件，這就是webpack為我們打包出來的靜態資源，而文件路徑就是我們在 output 中設置的值。

為了演示打包好的?main.bundle.js ，我們在根目錄下創建一個 index.html ，并引入main.bundle.js




    
    Title

在瀏覽器中打開 index.html，可見main.js中的代碼已經被執行了：

在IDE中打開main.bundle.js，代碼的最底部可以看到我們在main.js中寫的代碼。

至此，我們的第一次 webpack 打包就成功了。

GPU云服務器云服務器 java第一個小項目 java中第一個項目第一個php文件 webpack4教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100950.html

webpack4系列教程（十）：總結

摘要：傳送門系列教程一初識系列教程二創建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發環境和生產環境在前端開發日益復雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預處理、后處理等等。webpack的出現無疑是前端開發者的福音，我的博文只...

hqman 2019-08-26 13:29 評論0 收藏0
webpack4系列教程（五）：處理項目中的資源文件（二）

摘要：首先安裝在中引入并添加修改和的之后，可見中引入了一個文件也正是我們在和中的代碼可以幫助我們處理，如自動添加瀏覽器前綴。在根目錄下創建修改和的在中加入打包之后打開，可見瀏覽器前綴已經加上了 1. 在項目中使用 less? 在 src/assets/ 下新建 common.less ： body{ background: #fafafa; padding: 20px; } show...

Channe 2019-08-23 14:42 評論0 收藏0
webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack4 系列教程(二): 編譯 ES6

摘要：今天介紹怎么編譯的各種函數和語法。對于相關的匹配規則，除了匹配結尾的文件，還應該去除文件夾下的第三庫的文件發布前已經被處理好了。它需要在我們項目的入口文件中被引入，或者在中配置。個人網站原文鏈接系列教程二編譯今天介紹webpack怎么編譯ES6的各種函數和語法。敲黑板：這是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本節課源碼 >>> 所有課程源碼 1....

graf 2019-08-23 10:34 評論0 收藏0
webpack4 系列教程(一): 打包JS

摘要：本身就是為了打包所設計，作為第一節，介紹怎么打包。檢驗規范支持支持。創建文件夾，其中和分別用和規范編寫。收尾打包后的文件會按照我們的配置放在目錄下，這時，需要創建一個文件，引用打包好的文件。個人網站原文鏈接系列教程一打包 webpack 本身就是為了打包js所設計，作為第一節，介紹怎么打包js。 1. 檢驗webpack規范支持 webpack支持es6, CommonJS, AMD。...

chanthuang 2019-08-23 10:31 評論0 收藏0