初識Webpack

3 Webpack的正確安裝方式

1、安裝完node 和 git bash以後，新建文件夾webpackDemo。進入文件夾，使用npm init去初始這個項目。完成之後可以發現該命令就是生成一個package.json文件。描述了我們這個node項目的一些信息：

我們也可以去增加一些內容，比如：

private: true的意思就是我們的這個項目是一個私有的項目，不會被髮布到npm的線上倉庫裏。

去掉"main": "index.js"：因爲我們的這個項目不會被外部引用，只是自己來用，沒有必要向外暴露一個js文件。

2、安裝Webpack有兩種方式，先介紹第一種安裝方式。

A. 全局安裝

安裝命令： npm install webpack webpack-cli -g

此時我們的webpack和webpack-cli已經安裝成功了。

注意：我們不推薦通過全局的方式來安裝webpack。比如說我有兩個項目，假設webpack的版本號是固定的，都是4.26.0。但是我們一個項目是根據webpack3配置的，另一個項目是通過webpack4配置的，由於全局安裝的webpack版本是4.26.0，根據webpack3配置的那個項目是運行不起來的。此時解決辦法比較麻煩，需要刪除當前的webpack4，重新安裝webpakc3才能運行當前的項目。但是假設這兩個項目之間有依賴，需要啓動兩個項目，此時全局的安裝方式肯定是不能啓動的。所以推薦在項目內安裝Webpack。

B. 項目內安裝

首先需要卸載我們之前全局安裝的webpack。

卸載命令： npm uninstall webpack webpack-cli -g

卸載完成之後就可以在項目中安裝webpack了，

安裝命令： npm install webpack webpack-cli --save-dev 或者 npm install webpack webpack-cli -D

安裝成功之後，可以發現項目中增加了node_modules文件夾，這裏面保存的是webpack以及它所依賴的一些第三方的包。我們此時輸入webpack -v發現找不到它的版本，這是因爲node首先會去全局中找webpack，但是我們不是在全局安裝的webpack。但是node提供了一個npx命令幫助我們去運行，輸入：npx webpack -v，此時能夠顯示出版本號。這是因爲npx會幫助我們去本項目中的node_modules文件夾裏找webpack。

1 webpack究竟是什麼？

1、之前開發網頁：

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>
  <p>這是我們的網頁內容</p>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

index.js

var dom = document.getElementById('root');

var header = document.createElement('div');
header.innerText = 'header';
dom.append(header);

var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
dom.append(sidebar);

var content = document.createElement('div');
content.innerText = 'content';
dom.append(content);

效果：

上面這種面向過程的寫法已經不能滿足目前開發者的需求了，如果js的邏輯越來越多，全部放在一個文件中的這種面向過程的寫法後期維護起來很麻煩。所以開始使用面向對象的編程方式來開發，上面頁面中有三個部分，那我們就用三個對象來寫邏輯部分：

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>
  <p>這是我們的網頁內容</p>
  <div id="root"></div>
  <script src="./header.js"></script>
  <script src="./sidebar.js"></script>
  <script src="./content.js"></script>
  <script src="./index.js"></script>
</body>
</html>

header.js

function Header() {
  var header = document.createElement('div');
  header.innerText = 'header';
  dom.append(header);
}

sidebar.js

function Sidebar() {
  var sidebar = document.createElement('div');
  sidebar.innerText = 'sidebar';
  dom.append(sidebar);
}

content.js

function Content() {
  var content = document.createElement('div');
  content.innerText = 'content';
  dom.append(content);
}

index.js

var dom = document.getElementById('root');

new Header();
new Sidebar();
new Content();

效果一樣，這樣的話我們就通過面向對象改造了我們的代碼，使用面向對象可以使我們的代碼更具有維護性，因爲不同部分的邏輯都放在各自不同部分的對象裏，這樣代碼維護起來很方便，哪部分出錯了就去那部分修改即可，這就是面向對象的優勢。但是上面的寫法也有一定的問題：

（1）一個html文件引用了多個js文件，導致整個頁面的加載速度會變慢，因爲多出了三個http請求。

（2）我們不能很直觀的從index.js文件中看出不同對象所對應的文件在哪裏，要想知道，我們就必須去html文件中查看。

（3）我們不能很方便的去查錯。假如我們把content.js文件放在index.js後面引用，控制報錯顯示是index.js中有錯誤。

爲了解決上述問題，我們可以使用webpack：

文件代碼進行了一點修改：

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>
  <p>這是我們的網頁內容</p>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

index.js

//ES Module 模塊引入方式
import Header from './header.js';
import Sidebar from './sidebar.js';
import Content from './content.js';

var dom = document.getElementById('root');

new Header();
new Sidebar();
new Content();

效果：

首先進行npm init，創建package.json（定義了這個項目所需要的各種模塊,以及項目的配置信息(比如名稱、版本、許可證等元數據）。
進行npm install webpack webpack-cli -D，安裝webpack和webpack-cli。
運行npx webpack index.js，讓webpack幫我們去翻譯。

此時文件夾就多了一個dist文件夾，裏面有一個main.js文件。但是這是頁面還是報錯，想要實現效果，我們需要對代碼進行一點修改：

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>
  <p>這是我們的網頁內容</p>
  <div id="root"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

header.js, 另外兩個模塊文件也做類似的修改即可

function Header() {
  var dom = document.getElementById('root');
  var header = document.createElement('div');
  header.innerText = 'header';
  dom.append(header);
}

export default Header;

index.js

//ES Module 模塊引入方式
import Header from './header.js';
import Sidebar from './sidebar.js';
import Content from './content.js';

new Header();
new Sidebar();
new Content();

此時重新運行一遍npx webpack index.js即可正常顯示出效果了。

2 什麼是模塊打包工具？

webpack的核心定義是模塊打包工具

除了上面使用的ES Module 模塊引入方式以外，還有CommonJS（node裏面最常用的一個模塊引入規範）、CMD、AMD。webpack對以上的模塊引入方式都能夠正常識別。

CommonJS模塊引入方式實現上面的效果：

header.js, 另外兩個模塊文件也做類似的修改即可

function Header() {
  var dom = document.getElementById('root');
  var header = document.createElement('div');
  header.innerText = 'header';
  dom.append(header);
}

module.exports = Header;

index.js

//ES Module 模塊引入方式
// import Header from './header.js';
// import Sidebar from './sidebar.js';
// import Content from './content.js';

//CommonJS模塊引入方式
var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
var Content = require('./content.js');

new Header();
new Sidebar();
new Content();

重新運行npx webpack index.js之後效果一樣。

webpack發展到現在，它不光能打包js文件，還能打包css文件，甚至是png等的圖片文件。

4 使用webpack的配置文件

1、假如在項目中，我們想編寫配置webpack的文件，可以這麼做：

在lesson文件夾下新建一個文件，命名爲：webpack.config.js。添加配置代碼如下：

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    //__dirname指的是webpack.config.js當前所在的目錄路徑，第二個參數是文件夾的名字
    path: path.resolve(__dirname, 'bundle')
  }
}

entry: 我們這個項目要做打包的話，從哪一個項目開始打包。

output: 打包文件放置位置。這是一個對象，內部配置屬性： filename：打包後文件的名字；path：打包出的文件要放在哪一個文件夾下，必須填絕對路徑，而且使用前需要引入一個node的核心模塊-path；

運行npx webpack，可以發現目錄中多了bundle文件夾，裏面有一個bundle.js文件。

此時webpack的工作流程如下：

我們運行npx webpack的時候，一開始webpack並不知道自己該如何去打包，於是它就會去找默認的配置文件，找到webpack.config.js這個文件，然後就知道了如何去打包，如何去輸出。從而幫助我們去完成打包的流程。

假設我們打包配置文件不是默認名字，而是webpackconfig.js，此時執行npx webpack就會報錯，因爲webpack找不到默認的配置文件。解決辦法：

使用這個打包命令： npx webpack --config webpackconfig.js，意思就是以webpackconfig.js爲配置文件來進行打包。此時便成功打包了。

2、結合上面學習的知識點，我們對lessons這個項目進行優化。

項目中的index.js不能由瀏覽器直接運行，它需要webpack打包，打包後最終的代碼才能在瀏覽器中運行。所以index.js並不是我們放在瀏覽器中直接運行的代碼，它是我們的源代碼，一般我們都是把源代碼放在一個src的目錄裏。header.js、sidebar.js、content.js都是源代碼，我們將它們都放在src文件夾裏面。

目錄結構：

此時我們就需要把src目錄下的index.js打包成可以執行的js，那麼我們就需要把配置文件做一些修改了。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    //__dirname指的是webpack.config.js當前所在的目錄路徑，第二個參數是文件夾的名字
    path: path.resolve(__dirname, 'dist')
  }
}

此時執行npx webpack就打包成功了。問題：之前vue項目，我們都是使用npm run命令來執行一些操作的，此處確實使用npx，我們想繼續使用npm run來執行，可以在scripts這麼配置：

package.json文件中：

  "scripts": {
    "bundle": "webpack"
  }

意思就是當你執行bundle這個命令，它就會自動幫你執行webpack這個命令。首先會去項目中找是否有Webpack，沒有的話纔會去全局找

此時輸入npm run bundle就自動會幫我們進行打包了。

我們將index.html放進dist文件夾下，修改引用文件的路徑之後發現此時的項目目錄與之前接觸的react或vue項目目錄很相似了。

到目前爲止，我們介紹了三種運行Webpack的方式：

我們之前安裝的webpack-cli的作用就是幫助我們在命令行中正確執行webpack的指令，假設我們沒有安裝它，那麼我們就沒法在命令行裏運行webpack或npx webpack這樣的指令。

注意：我們不寫webpack的配置文件也能打包，只不過它使用的是webpack的默認配置。但是在做工程打包的時候，每個工程它的特點和複雜度都不同，一般來說我們都需要根據工程要求自己來配置複雜的Webpack配置文件。

5 淺談webpack打包知識點

執行npm run bundle打包之後，輸出的這些命令的意思如下：

Hash：對應的是本次打包的唯一一個Hash值
Version：本次打包使用的webpack的版本
Time: 本次打包所消耗的時間
Asset：bundle.js 表示我們打包出了一個bundle.js文件
Size: 1.36KiB 表示這個文件的大小是1.36kb
Chunks：裏面放的不僅是自己這個文件對應的id值，有可能bundle.js在大型項目中還和其它的一些js文件有關係，那麼其它打包出來的js文件的id也會放到bundle.js的Chunks的字段中
Chunk Names：和Chunks類似，只不過裏面放的是每一個js文件對應的名字。此時它的值之所以是main，是因爲我們配置文件中的

entry: './src/index.js'
是下面的簡寫方式
entry: {
   main: './src/index.js'
}

Entrypoint main 意思是打包的入口文件
[0] ./src/index.js 323 bytes {0} [built]
[1] ./src/header.js 198 bytes {0} [built]
[2] ./src/sidebar.js 204 bytes {0} [built]
[3] ./src/content.js 204 bytes {0} [built]
意思就是打包用到的js文件
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'productiis value. Set 'mode' option to 'development' or 'production' to enablefor each environment.
You can also set it to 'none' to disable any default behavior. Learn m://webpack.js.org/configuration/mode/
意思是我們沒有指定打包的模式以及打包的環境。消除警告的方法是添加如下配置：

const path = require('path');

module.exports = {
  mode: 'production',  //意思是打包後的文件被壓縮，我們不配置mode的話默認值是被壓縮，但是會警告。
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

mode的另一個值是development，意思就是打包後的文件不被壓縮。

3 Webpack的正確安裝方式

1 webpack究竟是什麼？

2 什麼是模塊打包工具？

4 使用webpack的配置文件

5 淺談webpack打包知識點

關於遊戲付費的一點想法

React 高級內容

Webpack核心概念

初識Webpack

React 基礎內容

es6語法之函數的擴展總結常用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結