今天我準備總結的就是最近看的webpack4.17.1版本
一、為什麼要用webpack
現今的很多網頁其實可以看做是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。為了簡化開發的複雜度，前端社群湧現出了很多好的實踐方法
1.子產品化，讓我們可以把複雜的程式細化為小的檔案;
2.類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實作目前版本的JavaScript不能直接使用的特性，并且之後還能轉換為JavaScript檔案使浏覽器可以識别；
3.Scss，less等CSS預處理器
二、webpack的工作方式
把我們的項目當做一個整體，通過一個給定的主檔案（如：index.js），Webpack将從這個檔案開始找到我們的項目的所有依賴檔案，使用loaders處理它們，最後打包為一個（或多個）浏覽器可識别的JavaScript檔案。
三、怎麼使用webpack
1、首先安裝webpack之前需要先安裝node：
- 在官網中下載下傳node，然後安裝。
- 使用npm 安裝webpack
//全局安裝webpack
npm install -g webpack
//安裝到我們的項目目錄下
npm install --save-dev webpack
2、建立package.json檔案
(在建立檔案的過程中，會需要我們輸入項目各種資訊，如果沒有要求嚴格，可以直接回車)
npm init
3、在目前目錄下安裝webpack
4、建立html頁面、js檔案（我是建立了兩個，一個用來集合所有的js檔案）
webpack打包的優勢：将所有檔案都加載成為靜态資源，放在一個檔案中。（webpack有多檔案打包入口）
現在我來介紹一下我的目錄：
str.js主要提供一些靜态的變量、方法等，
index.js主要将使用的js全部集合起來。
index.html就是展示頁面，index.html裡面需要引入我們的打包好的檔案，現在還未打包，是沒有的，但是我們可以假裝引入
那麼現在我們的準備工作已經完成
5、打封包件
指令非常簡單，bundle.js就是我們打包好的檔案，bundle是打包的意思，是以可以使用這個命名。
下面是我打包好的bundle.js檔案
當我們需要引入CSS樣式檔案的時候，我們需要
建立style.css檔案
使用npm安裝style-loader和css-loader
“`stylus
npm install –save-dev style-loader css-loader
在index.js檔案中引入css檔案，
```stylus
require("!style-loader!css-loader!./style.css")
<div class="se-preview-section-delimiter"></div>
但是每次引入一個css樣式檔案都寫!style-loader!css-loader!太過于繁瑣，是以，我們可以在webpack.config.js中配置
stylus
module: {
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
}
]
},
以上就是我看的簡單的webpack的使用