【筆記】webpack4.0教程_配置詳解_圖文_新手入門_快速上手

阿新 • • 發佈：2019-01-18

前言

這篇筆記會從node安裝開始，到搭建基礎的webpack環境為止。中間每一步的配置和遇到的術語、名詞，我都會做簡單的解釋。
同時，這篇博文是一篇記錄我學習webpack的過程筆記，因為我也在學習過程，如果有記述錯誤之處，歡迎指正。
【注：全程系統環境為 Windows，webpack 版本號：4.8.3】

一、安裝所需軟體

安裝node

node：node是一種javascript的執行環境，能夠使得javascript脫離瀏覽器執行（不做重點介紹）。

1.開啟下載連結下載安裝包：點選下載
2.安裝好之後開啟 命令提示符 分別輸入

node -v
npm -v

檢視node版本
這裡可以看到剛剛安裝的node的版本號和npm的版本號（npm是node的附屬品）

使用 cnpm

npm：npm（Node Package Manager）是一個基於 node 的包管理器。
包：凡是我們在前端專案中引用的檔案，都可稱為包（Package），比如JQuery、Bootstrap、Underscore。通過 npm 我們可以很方便的下載我們需要包的指定版本或者最新版本。我們要使用的 webpack 就是一個包。
cnpm：cnpm是淘寶團隊做的 NPM 映象，為什麼要做使用 cnpm ？因為國內網路從npm 包普遍會很慢，所以要使用 cnpm

1.開啟 命令提示符

，輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

2,檢驗cnpm代替成功：命令列輸入：

cnpm -v

只要不提示 不是內部或外部命令 ，就代表你可以使用 cnpm 了。

二、初始化並安裝 webpack

初始化 npm

1.選擇一個你準備建立前端專案的目錄，按住 shift 鍵點選滑鼠右鍵—>選擇 在此處開啟命令視窗
2.輸入 npm init -y 在當前目錄初始化 npm 並且使用預設配置，此時會在該目錄下建立有個npm配置檔案 package.json

瞭解 webpack

首先，簡單瞭解一下webpack：先看官網的介紹圖。
webpack介紹
webpack：webpack的作用就是把我們專案中所有需要的資源合併打包到一起。官方介紹就是讓一切變得簡單，具體想深入瞭解webpack的特點，推薦閱讀官方文件：

安裝 webpack

這裡，我們需要明確一點，webpack屬於一個npm的包，所以使用npm進行安裝。

1.開啟命令視窗，輸入

cnpm install webpack webpack-cli --save-dev

回車後就會在當前目錄下安裝webpack，並且會在該目錄下多出一個資料夾 node_modules 後續，你通過 npm 安裝的所有包都會被放在這個資料夾中。

2.開啟 package.json , 看到有如下三行，就代表以及安裝成功

"devDependencies": {//開發模式
    "webpack": "^4.8.3",//外掛名和版本號
    "webpack-cli": "^2.1.4"//外掛名和版本號
}

需要補充的是，剛才輸入的 --save-dev 的含義是：
①將所安裝的包分類到開發模式下
②將安裝過的包寫入到 package.json 配置檔案

三、使用 webpack

建立專案並使用 webpack 打包

1.首先，建立如下的目錄結構和檔案
2.其次，每個檔案中的程式碼如下
./index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./dist/main.js"></script>
    <!-- src引入的檔案將在接下來由 webpack 打包建立 -->
</body>
</html>

./src/index.js：

import {name} from './init';//引入 init.js 存於 name ， (js字尾可以省略)

alert(name);

./src/init.js：

var name = "newApp";

export {//ECMAScript 6 語法 ， 向外暴露介面供其他檔案呼叫時使用
    name//將變數 name 指定為向外暴露成員
};

3.在當前目錄下—>按住 shift 點選滑鼠右鍵—>選擇 在此處開啟命令視窗—>輸入：

npx webpack

這一行的含義是啟用 webpack 進行打包。打包過程中會提醒錯誤，忽略掉就好，這是因為沒有選擇打包模式，雖然提示了錯誤，但 webpack 預設會採取生產者模式打包。

4.啟動 index.html ，此時會在瀏覽器彈出輸出 “newApp”。
至此，我們已經掌握 webpack 的安裝-基礎使用。

*【練習】使用並打包 JQuery

通過這個小練習，目的是為了大家理解包（Package）這個概念，新手往往會在這裡有混淆，同時，還有一個目的就是接觸 es6 語法。
我推薦在看完我這篇筆記後，去了解並熟悉一下 es6 的使用。

1.使用 npm 安裝 jquery 包。在你專案根目錄下啟動 命令視窗 ，輸入

cnpm i jquery --D

這行命令中， i 是 install 的縮寫。 --D 是 --save-dev 的縮寫。

2.修改 ./src/index.js 裡的內容

import $ from 'jquery';//引入Jquery

$(function(){  
    $("body").html("Hello <b>world</b>!");  
})

3.在命令列中輸入 npx webpack 進行打包，然後開啟 index.html ，網頁中顯示文字 “Hello world!” 說明 jquery
已經使用

練習小結：

我們通過npm 安裝了 jquery 和 webpack ，這兩個都是 npm 的包。
包與包之間是平行關係，但對於開發來說， webpack 是一個工具， jquery 是專案中使用的功能
我們使用 webpack 這個包來管理其他的包（jquery）

四、深入配置 webpack

學習使用 webpack 配置檔案

我們已經知道，weboack 是一個管理其他包的工具，那麼想要更加靈活自如的管理其它包，我們就需要某些設定，接下來我們來建立配置檔案。

1.在專案根目錄建立檔案 webpack.congig.js

const path = require('path');//設定路徑

module.exports = {//配置正式開始
  entry: './src/index.js',//設定入口
  output: {//設定打包出口
    path: path.resolve(__dirname, 'dist'),//打包檔案放在這個目錄下
    filename: 'main.js'//打包檔名
  },
  module: {},//loader 相關配置
  plugins:[],//外掛 相關配置
  mode: 'development'//設定模式為開發者模式
};

配置項其實也就只有五個，分別是：入口 entry 、出口 output 、Loader loader 、外掛 plugins 、模式 mode
入口和出口，分別制定在哪裡尋找專案依賴的資原始檔，把資原始檔打包後放在哪個目錄下面。

外掛：外掛用來增加一些特定功能，比如，程式碼壓縮。再比如，觀察現在的專案，正個打包過程，都沒有 html 檔案參與進來。如果我們希望 html 檔案也參與進來，就需要一個特定外掛 html-webpack-plugin

瞭解並使用 loader

我們不詳細介紹外掛，但 loader 還是要講講。
我們前面提到，webpack 是用來打包專案依賴的資源的，但我們專案中的資源可謂是各式各樣， webpack 預設只認得 js 檔案，想讓其他資原始檔也參與進來，就需要使用 loader

接下來，我們就嘗試用 style-loader 和 css-loader 來處理 css 資源

1.在專案目錄下啟動 命令視窗 ，輸入 cnpm i style-loader css-0loader --D
【注】這裡需要註釋一下，無論是 loader 還是 外掛 ，相對 npm 來說都是一個包。這裡初學者自己理一下關係，我們到目前為止，用到的 jquery 、 webpack 、 stule-loader 、 css-loader 還有將來要用到的 webpack 的外掛，都屬於 npm 的包。
2.修改 webpack 配置檔案 webpack.congig.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {//配置 loader
    rules: [//相關規則寫在這裡
      {
        test: /\.css$/,//正則表示式：根據字尾為 .css 的檔案來匹配 css 檔案
        use: [//匹配搭配 css 檔案後，打包時使用以下 loader 來處理檔案
          { loader: 'style-loader' },//loader 名稱
          {
            loader: 'css-loader',//loader 名稱
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  },
  plugins:[],
  mode: 'development'
};

3.建立css檔案： css/main.css

html{
    background-color: aqua;
}

此時專案下目錄結構為
這裡寫圖片描述

4/修改 js 入口檔案 src/index.js

import $ from 'jquery';
import '../css/main.css';//引入css檔案

$(function(){  
    $("body").html("Hello <b>world</b>!");  
})

5.使用 webpack 進行打包，打包後訪問 index.html ，你會看到剛才的樣式已經引用進去了。那麼現在我們已經成功使用 loader 讓 webpack 能夠識別 css 格式的資原始檔，並且打包到專案中了。

瞭解並使用 watch

watch：啟動 watch 後 webpack 可以監聽檔案變化，當它們修改後會重新編譯。

1.打包時在 命令視窗 輸入 npx webpack --watch 即可啟動 watch 模式。之後再修改資原始檔， webpack 會自動打包。

結束語

本筆記旨在記錄自己學習過程，同時初學者參考本筆記後可以從 node 安裝開始，到搭建可以使用 loader並自動打包的 webpack 環境。
我使用的 webpack 版本為 4.8.3
因為我也是初學者，如果在筆記中有描述錯誤或者不到位的地方，歡迎指正，我會及時修改的。
๛ก(ｰ̀ωｰ́ก)

【筆記】webpack4.0教程_配置詳解_圖文_新手入門_快速上手

前言

一、安裝所需軟體

安裝node

使用 cnpm

二、初始化並安裝 webpack

初始化 npm

瞭解 webpack

安裝 webpack

三、使用 webpack

建立專案並使用 webpack 打包

*【練習】使用並打包 JQuery

四、深入配置 webpack

學習使用 webpack 配置檔案

瞭解並使用 loader

瞭解並使用 watch

結束語

【筆記】webpack4.0教程_配置詳解_圖文_新手入門_快速上手

【Spring】Spring MVC原理及配置詳解

【轉】Mybatis Generator最完整配置詳解

【筆記】從架構到演算法，詳解美團外賣訂單分配內部機制

【筆記】linux下的nginx配置(做動態服務)

【筆記】kafka權威指南-常用配置和要點記錄

【go 語言環境安裝】goland語言環境安裝配置詳解

【文字檢測】SSD+Tensorflow 300&512 配置詳解

【Linux】Linux定時任務Crontab命令詳解

MySQL官方教程及各平臺的安裝教程和配置詳解入口

【轉載】linux下的mount命令詳解；

【轉】 C語言文件操作詳解

【Android】Android六種布局詳解

【轉】C++拷貝構造函數詳解

【轉載】 c++中static的用法詳解

【shell】Linux shell for 循環詳解

【轉載】Maven依賴中的scope詳解

【轉】java的動態代理機制詳解

【Python】hasattr() getattr() setattr() 使用方法詳解

【轉】Oracle 11g Dataguard 參數詳解

【筆記】webpack4.0教程_配置詳解_圖文_新手入門_快速上手

前言

一、安裝所需軟體

安裝node

使用 cnpm

二、初始化並安裝 webpack

初始化 npm

瞭解 webpack

安裝 webpack

三、使用 webpack

建立專案並使用 webpack 打包

*【練習 】使用並打包 JQuery

四、深入配置 webpack

學習使用 webpack 配置檔案

瞭解並使用 loader

瞭解並使用 watch

結束語

相關推薦

*【練習】使用並打包 JQuery