Webpack入門
Webpack是什麼
webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(static module bundler)
在 webpack 處理應用程序時，它會在內部創建一個依賴圖(dependency graph)，用於映射到項目需要的每個模塊，然後將所有這些依賴生成到一個或多個bundle
Webpack做什麼
注意：webpack 不會更改代碼中除 import 和 export 語句以外的部分。如果你在使用其它 ES2015 特性，請確保你在 webpack 的 loader 系統(後邊會介紹)中使用了一個 Babel或者類似功能的轉譯器(將高版本js語法轉爲低版本語法)
Webpack的安裝【全局與本地】
①安裝命令
cnpm i webpack-cli -g //webpack-cli表示webpack命令行工具
cnpm i webpack -g //-g表示安裝在全局
或者
cnpm i webpack-cli webpack -g
②檢測全局安裝是否成功
webpack -v 或 webpack --version //查看版本
本地安裝webpack
①創建本地項目目錄
可以手動創建也可以用命令行創建，這裏我直接在桌面下手動創建一個webpack的文件夾
②創建package.json文件
npm init --yes 或者 npm init -y //y是yes的縮寫
③執行安裝命令
在本地安裝webpack 與 webpack-cli，用於項目使用
cnpm install webpack webpack-cli -D //-D是本地安裝
安裝完成後的項目目錄
Webpack的基本使用
模塊化
Gulp的關注點主要在於流程的自動化，而webpack的關注點這主要在於實現模塊化開發
ES6模塊語法
ES6模塊主要有兩個功能：export和import
- export用於對外輸出本模塊（一個文件可以理解爲一個模塊）變量的接口
- import用於在一個模塊中加載另一個含有export接口的模塊
示例演示
- 先創建兩個js文件: m1.js , m2.js ，這兩個js文件表示兩個模塊。
- 然後在創建一個index.js，這個文件引入了m1.js ，m2.js 這兩個
模塊中的內容（這裏就會使用到前面學的es6模塊化語法，import,export） - 同時index.js這個js文件也是項目入口文件，webpack會從這個文件中尋找相關依賴模塊然後進行打包，生成最終打包後的文件main.js
- 然後在創建一個index.html，這個文件引入了打包後生成的main.js文件，從而可以直接使用m1.js,m2.js兩個模塊中的內容
![在這裏插入圖片描述]()
創建基本目錄 - Src ：放置模塊文件目錄Component與入口js文件m1.js,m2.js
Component: 放置所有的模塊js - Dist ：放置index.html和 打包後生成的main.js文件
![在這裏插入圖片描述]()
模塊一：src/component/m1.js代碼
function m1() {
console.info("我是模塊一：m1.js");
}
export { m1 }; //將m1模塊導出
模塊二：src/component/m2.js代碼
function m2() {
console.info("我是模塊二：m2.js");
}
export { m2 }; //將m2模塊導出
入口文件：src/index.js代碼
import {m1} from "./component/m1.js";
import {m2} from "./component/m2.js";
m1();//執行m1模塊中的內容
m2();//執行m2模塊中的內容
網頁文件：dist/index.html代碼
<html lang="zh-CN">
<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>webpack test</title>
<!-- 直接引入打包後生成的文件 -->
<script src="main.js"></script>
</head>
<body>
<div>webpack test</div>
</body>
</html>
開始打包
直接打開vscode的終端，在項目的根目錄下執行webpack就可以讓webpack通過index.js入口文件進入項目中把m1.js , m2.js打包爲main.js文件讓index.html引入
運行dist下的inde.html網頁文件，觀察結果，成功的運行
關於警告
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
這個警告的含義是說讓你必須設置一個打包模式：開發 或 生產
開發模式 或 生產模式
我們使用webpack，通常需要定義兩個配置文件，一個用於development環境，一個用於production環境
這裏我們在打包時指定下打包模式即可，如下：
webpack --mode development //表示打包爲開發模式
webpack --mode production //表示打包爲生產模式（即最終發佈的模式），默認模式
一般而言，生產模式下只打包必須要的東西，不會考慮聲明開發調試的友好性，打包出來的代碼不會壓縮，打包出來的東西一般比較小。而開發模式打包出來的東西就比較大了
打包爲開發模式
打包爲生產模式
把打包命令寫入package.json中
在package.json添加如下命令：
"dev":"webpack --mode development",
"pro":"webpack --mode production",
打包演示–開發模式打包
命令：
npm run dev
打包演示–生產模式打包
命令：
npm run pro
關於webpack4零配置
使用babel時需要.babelrc配置文件
使用gulp時也需要gulpfile.js配置文件
那麼現在使用webpack是否也需要一個配置文件呢？上面我們並沒有使用配置文件也打包成功了
實際上這是webpack4新出的特性，在webpack4以前是需要配置文件 webpack.config.js 的，配置文件用於配置打包相關的各種信息
而在webpack4時，在簡單項目下允許你不使用配置文件，即零配置也能打包成功
這個零配置指的是：
- 在webpack4中它會默認定義./src/index.js爲入口文件。
- 在webpack4中它會默認定義一個輸出文件main.js到dist中。
- 這相當於是他默認給我們創建了一個配置文件，其中指定了打包的入口文件和出口文件信息，然後只要我們按照這個目錄結構構建我們的項目，那麼在我們沒有用到webpack的複雜功能時，我們就可以不使用配置文件，也能打包成功
當然，如果你沒有用配置文件，目錄結構又不是這樣寫的，那麼自然打包就會失敗，如下我就把入口文件index.js改爲了index1.js，然後就打包失敗了
配置文件
在目錄下創建配置文件webpack.config.js
配置文件基本內容如下
const path = require('path');
module.exports = {
entry: './src/index.js', //表示入口文件，即從index.js進入我們的項目
output: { //表示輸入文件相關信息
path: path.resolve(__dirname, 'dist'), //輸出到當前目錄下的dist文件夾，如果不存在就會自動創建一個
filename: 'main.js' // 表示打包後生成的最終js文件
}
};
我們把entry改爲index1.js，然後把項目中的index.js也改爲index1.js也可以打包成功了
注：這裏我用的webpack4，3的版本打包不一樣的，可以在網上搜一下