1.Webpack安裝
在用 Webpack 執行構建任務時需要通過 webpack 可執行文件去啓動構建任務，所以需要安裝 webpack 可執行文件。 ( 例如：webpack --config webpack.config.js )
在安裝 Webpack工具前請確保你的系統安裝了5.0.0及以上版本的 Node.js。因爲webpack在執行打包壓縮等時是依賴node.js的，沒有node.js就不能使用Webpack
注意：
node、nodejs、node.js是同一個東西，只是名字不同而已，而npm只是nodejs的一個模塊
1.全局安裝Webpack
安裝到全局後你可以在任何地方共用一個 Webpack 可執行文件( 也就是說可以直接在終端使用webpack的命名 ,例如：webpack --config webpack.config.js)，而不用各個項目重複安裝，安裝方式如下：
npm i -g webpack # i 是 install的簡寫； -g 是全局安裝
全局安裝的目的是：直接打開終端就可以使用Webpack命令，而不需要進入到指定的項目下。
webpack -v查看Webpack是否安裝成功
$ webpack -v
4.35.3
如果有下面提示，因爲在webpack 3中，Webpack本身和它的Webpack-CLI以前都是在同一個包中，但在第4版中，它們已經將兩者分開來更好地管理它們, 所以在全局安裝Webpack 4.x 以後要單獨安裝Webpack-CLI，
執行： npm install -g webpack-cli
$ webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
2.項目中安裝Webpack
要安裝 Webpack 到項目中，可按照你的需要選擇以下任意命令運行：
# npm i -D 是 npm install --save-dev 的簡寫，是指安裝模塊並保存到 package.json 的 devDependencies
# 安裝最新穩定版
npm i -D webpack
# 安裝指定版本
npm i -D webpack@<version>
# 安裝最新體驗版本
npm i -D webpack@beta
安裝完後你可以通過這些途徑運行安裝到本項目的 Webpack：
-
在項目根目錄下對應的命令行裏通過
node_modules/.bin/webpack運行 Webpack 可執行文件。 -
在 Npm Script 裏定義的任務會優先使用本項目下的 Webpack，代碼如下：
"scripts": { "start": "webpack --config webpack.config.js" # 優先運行項目中的webpack，項目下沒有則運行全局安全的webpack }
3.使用Webpack
新建一個 HelloWorld 項目，目錄結構如下圖
|-- src
| | `-- common.js
| | `-- index.html
| `-- main.js
`-- webpack.config.js
webpack.config.js 是項目中 Webpack 的配置文件：
// 1.從 node環境 中導入 path 模塊
const path = require('path');
console.log(__dirname) // 表示當前執行腳本所在目錄的絕對路勁，是node的全局變量
console.log(path.resolve(__dirname, '/dist')) // 表示當前執行腳本所在目錄的絕對路勁下的dist目錄
// 2.聲明導出一個 對象
module.exports = {
// 3.JavaScript 執行入口文件
entry: './src/main.js',
output: {
// 4.把所有依賴的模塊合併輸出到一個 bundle.js 文件
filename: 'bundle.js',
// 5.輸出 bundle.js 文件都放到 dist 目錄下
path: path.resolve(__dirname, './dist'),
}
};
main.js是 Webpack 打包入口文件:
// 1.通過 CommonJS 規範導入 showHelloWorld 函數
const showHelloWorld = require('./common.js');
// 2.執行 showHelloWorld 函數
showHelloWorld('Webpack的安裝和使用');
common.js 是項目存放公共代碼文件：
function showHelloWorld(content) {
alert('hello world')
}
// 通過 CommonJS 規範導出 showHelloWorld 函數
module.exports = showHelloWorld;
index.html 是項目的首頁：
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導入 Webpack 輸出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>
一切文件就緒，在項目根目錄下執行 webpack 命令（執行該命令後會自動找到webpack.config.js配置文件並開始執行構建）運行 Webpack 構建，你會發現目錄下多出一個 dist目錄，裏面有個 bundle.js 文件， bundle.js 文件是一個可執行的 JavaScript 文件，它包含頁面所依賴的兩個模塊 main.js 和 common.js 及內置的 webpackBootstrap 啓動函數。 這時你用瀏覽器打開 index.html 網頁將會看到：彈出 Webpack的安裝和使用的對話框
以下是控制檯的輸出:（在執行webpack的時候，至少全局已安裝Webpack）
liujun@DESKTOP-SAM0OS0 MINGW64 /f/blog/webpack-study/webpackCode/01-安裝和使用Webpack
$ webpack
F:\blog\webpack-study\webpackCode\01-安裝和使用Webpack
F:\dist
Hash: 0a352db1fa065d884973
Version: webpack 4.35.3
Time: 370ms
Built at: 2019-07-11 10:19:07
Asset Size Chunks Chunk Names
bundle.js 1010 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/main.js 148 bytes {0} [built]
[1] ./src/common.js 138 bytes {0} [built]
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/configuration/mode/
打包後輸出的目錄結構：( 多出了一個bundle.js 文件 )
|-- dist
| `-- bundle.js
|-- src
| | `-- common.js
| | `-- index.html
| `-- main.js
`-- webpack.config.js
4.總結
Webpack 是一個打包模塊化 JavaScript 的工具，它會從 main.js 出發，識別出源碼中的模塊化導入語句， 遞歸的尋找出入口文件的所有依賴，把入口和其所有依賴打包到一個單獨的文件中。 從 Webpack2 開始，已經內置了對 ES6、CommonJS、AMD 模塊化語句的支持。從從 Webpack4 開始需要單獨安裝從 Webpack-CLI工具