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

時間 2019-12-07

標籤 webpack4 webpack 系列教程建立項目打包第一個文件欄目 JavaScript 简体版

原文原文鏈接

1. 建立項目

1.1 初始化一個項目

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

npm init 進行項目的初始化：html

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

1.2 安裝webpack

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

2. 打包第一個JS文件

首先，咱們在根目錄下建立一個 webpack.config.js 文件和一個src文件夾。而後在src中建立一個 main.js 文件，以下：webpack

在 main.js 中寫一行 web

alert('hello world')

而後打開 webpack.config.js ，進行webpack的配置：npm

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 文件夾中。json

在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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/main.bundle.js"></script>
</body>
</html>

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

在IDE中打開main.bundle.js，代碼的最底部能夠看到咱們在main.js中寫的代碼。

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