一、前言
webpack在不斷的迭代優化，目前已經到了4.29.6。在webpack4這個版本中，做了很多優化，引入了很多特性，將獲得更多模塊類型，.mjs支持，更好的默認值，更為簡潔的模式設置，更加智能的chunk，新增的splitChunks來自定義分隔代碼塊等等。升級待4，在打包速度，代碼體積，數量，以及運行效率上有一個飛躍。
二、安裝webpack4最基礎入門
2.1首先初始化npm 項目，npm init初始化，生成package.json
node版本建議8.2以上
npm init -ynpm i webpack webpack-cli webpack-dev-server -Dnpm i -D是npm install --save-dev 的縮寫，是安裝模塊並保存到package.json的devDependencies中，主要是開發環境的依賴包。
2.2新建src/index.js 和 dist/index.html
2.3webpack4是零配置
在使用webpack進行打包的時候，默認情況下會將src下的入口文件(index.js)進行打包。
可以直接在終端中輸入命令webpack 將當前的內容進行一個簡單的打包。
這樣dist文件夾下面多了一個main.js文件。
但是有一個黃色警告，mode是webpack中獨有的，兩種打包環境，一個是開發環境：development，另外一個是生產環境：production。
打包的時候，輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了。
下面是webapck --mode=production命令打包，這個是代碼壓縮過的，細心的朋友應該也發現打包后小了很多。
2.4新建config/webpack.config.js創建文件
在 webpack v4 中，可以無須任何配置，然而大多數項目會需要很復雜的設置，這就是為什么 webpack 仍然要支持 配置文件。這比在 terminal(終端) 中手動輸入大量命令要高效的多，所以讓我們創建一個配置文件：
進入到webpack.config.js文件中進行配置，具體在代碼中注釋（這里簡單的一些，具體的下面會給大家）
const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路徑*/ path: path.resolve(__dirname, '../dist'),
/*打包文件名稱*/ filename: "main.js" }, /*模塊：例如解讀css，圖片轉換，壓縮*/ module: { }, /*插件，用於生產的各種功能*/ plugins: [ ], /*配置webpack開發服務的功能*/ devServer: { } }現在不能執行之前的webpack --mode="development"命令了會報下面的錯誤。
這里是因為webpack4打包默認找的src下面的index.js入口，我們前面已經刪除了，現在這里src下面是main.js文件，所以找不到就報ERROR in Entry module not found: Error: Can't resolve './src' ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\2019github\resume'錯誤。
所以這里我們到package.json里面配置下命令，讓打包的時候執行我們在config/webpack.dev.js下面配置的入口。
2.5package.json配置命令
執行npm run build
現在配置打包時候的入口文件以及出口文件，很多朋友看webpack.dev.js中的注釋。入口是./src/main.js
打開index.html
注意：
1、如果你使用的是 npm 5，你可能還會在目錄中看到一個 package-lock.json 文件。
以上就是最基礎的webpack4的搭建。
三、管理資源
在 webpack 出現之前，前端開發人員會使用 grunt 和 gulp 等工具來處理資源，並將它們從 /src 文件夾移動到 /dist 或 /build 目錄中。
像 webpack 這樣的工具，將動態打包所有依賴（創建所謂的 依賴圖(dependency graph)）。
webpack 最出色的功能之一就是，除了引入 JavaScript，還可以通過 loader 引入任何其他類型的文件。
3.1 加載css
在js模塊中，import 一個css文件，你需要安裝style-loader和css-loader，並在配置文件中添加這些loader。
npm i style-loader css-loader --save-devwebpack.config.js中
const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路徑*/ path: path.resolve(__dirname, '../dist'), /*打包文件名稱*/ filename: "main.js" }, /*模塊：例如加載css，圖片轉換，壓縮*/ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, /*插件，用於生產的各種功能*/ plugins: [ ], /*配置webpack開發服務的功能*/ devServer: { } }webpack 根據正則表達式，來確定應該查找哪些文件，並將其提供給指定的 loader。在這個示例中，所有以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader。
通過在項目中添加一個新的 style.css 文件，並將其 import 到我們的 index.js中：
在src/index.js
import _ from 'lodash' import './css/index.css' function component() { let ele = document.createElement('div'); ele.innerHTML = _.join(['你好,2019,saucxs','webpack']); return ele } document.body.appendChild(component());現在運行 build 命令：
查看后發現：
注意：在多數情況下，你也可以進行 CSS 提取，以便在生產環境中節省加載時間。最重要的是，現有的 loader 可以支持任何你可以想到的 CSS 風格 - postcss, sass 和 less 等。
3.2 加載image圖像
假想，現在我們正在下載 CSS，但是像 background 和 icon 這樣的圖像，要如何處理呢？使用 file-loader，我們可以輕松地將這些內容混合到 CSS 中：
npm install file-loader --save-devwebpack.config.js
const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路徑*/ path: path.resolve(__dirname, '../dist'), /*打包文件名稱*/ filename: "main.js" }, /*模塊：例如加載css，圖片轉換，壓縮*/ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|jpeg|gif|webp)$/, use: [ 'file-loader' ] } ] }, /*插件，用於生產的各種功能*/ plugins: [ ], /*配置webpack開發服務的功能*/ devServer: { } } 在使用 css-loader 時，如前所示，會使用類似過程處理你的 CSS 中的 url('./my-image.png')。loader 會識別這是一個本地文件，並將 './my-image.png' 路徑，替換為 output 目錄中圖像的最終路徑。而 html-loader 以相同的方式處理 <img src="./my-image.png" />。
我們向項目添加一個圖像，然后看它是如何工作的，你可以使用任何你喜歡的圖像：
src/index.js
import _ from 'lodash' import './css/index.css' import sau from './img/sau.jpg' function component() { let ele = document.createElement('div'); ele.innerHTML = _.join(['你好,2019,saucxs','webpack']); var image = new Image(); image.src = sau; ele.appendChild(image) return ele } document.body.appendChild(component()); src/css/index.css
body{
color: pink;
background: url('../img/sau.jpg'); } 重新構建並再次打開 index.html 文件
果一切順利，你現在應該看到你的 sau.jpg圖標成為了重復的背景圖，以及文本旁邊的 img 元素。如果檢查此元素，你將看到實際的文件名已更改為 e2c11146949c08b542c068aefc0c1d7b.jpg。這意味着 webpack 在 src 文件夾中找到我們的文件，並對其進行了處理！
3.3 加載字體
像字體這樣的其他資源如何處理呢？file-loader 和 url-loader 可以接收並加載任何文件，然后將其輸出到構建目錄。這就是說，我們可以將它們用於任何類型的文件，也包括字體。讓我們更新 webpack.config.js 來處理字體文件：
webpack.config.js
{
test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }