wabpack 概念
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
可以從這裏瞭解更多關於 JavaScript 模塊和 webpack 模塊的信息。
從 webpack v4.0.0 開始，可以不用引入一個配置文件。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：
入口(entry)
輸出(output)
loader
插件(plugins)
下面例子這裏可以對照官網學習，下面是我根據官網學習後自己的總結。
起步
傳統的html，是使用 script 引入代碼依賴，這樣會導致全局污染。有沒有一種方式可以局部加載，在需要的 js 裏，再引入依賴代碼。
那麼 webpack 解決了我們的問題，使用import、export，來引入我們需要的依賴。webpack 在幕後會將代碼“轉譯”程序中通過 import 引入的依賴，使瀏覽器可以執行。
使用配置文件
在根目錄新建文件webpack.config.js，
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
其中 path = require('path');是 nodejs 的庫。
1、entry代表入口文件
2、output根據入口文件，webpack 轉義後生成的輸出文件。filename輸出的文件名，path輸出文件放在哪個目錄下。
下載後運行命令
npm install
npx webpack
NPM 腳本(NPM Scripts)
使用 npm 腳本
npm run build
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
管理資源
webpack 自身只理解 JavaScript本身只理解 JavaScript，如果要處理 css、圖片等，需要用 loader。
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。
我們需要通過 npm安裝一系列的 loader，
css-loader
npm install --save-dev style-loader css-loader
圖片 loader，字體 loader
npm install --save-dev file-loader
數據loader
npm install --save-dev csv-loader xml-loader
安裝完 loader，在 module 配置中 ，可以引入這些loader，webpack 會讀取配置文件，解析我們 css 文件，圖片等。
關於 loader 的一些語法：
test 屬性，正則表達式，檢測哪些文件需要轉換。
use 屬性，表示進行轉換時，應該使用哪個 loader。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:[
'file-loader'
]
},
{
test:/\.(csv|tsv)$/,
use:[
'csv-loader'
]
},
{
test:/\.xml$/,
use:[
'xml-loader'
]
}
]
}
}
例子鏈接：管理資源/demo5
管理輸出
上面做的需要手動在 index.html 引入js、css、圖片等資源，webpack 可以自動根據配置文件 import，自動引入這些資源到 index.html
我們用 HtmlWebpackPlugin 插件來解決這個問題。
如下就是 webpack 插件的用法，以數組方式呈現。
安裝插件
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
如果你的項目裏dist目錄下有 index.html，那麼就會覆蓋調 index.html，如果沒有就會自動生成 dist 文件夾，並生成 index.html
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>
例子鏈接：管理輸出/demo6/
清理 /dist 文件夾
這裏用到插件clean-webpack-plugin，使用這個插件後會先清除 dist 文件夾裏的所有文件。
可以嘗試在dist 文件夾下建立一個空的 index.js,當運行npm run build後，會發現 index.js 不見了，只留下打包的重要的文件。
安裝插件
npm install clean-webpack-plugin --save-dev
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
現在執行 npm run build，再檢查 /dist 文件夾。如果一切順利，你現在應該不會再看到舊的文件，只有構建後生成的文件！
開發
使用 source map
開發的過程中，webpack 打包源代碼後，很難追蹤錯誤代碼，這時可以使用source map，使打包後的文件，提示錯誤出在什麼地方，以方便我們調試。
webpack.config.js
devtool: 'inline-source-map',
例子鏈接：/開發/demo7-sourcemap/
選擇一個開發工具
這裏選擇開發工具的意思是，不再每次 build 查看代碼運行情況，這樣太麻煩了，希望看到的結果是修改代碼後，可以立即看到效果。
webpack 有三種方式
1、使用觀察模式 ，使用命令webpack --watch
2、 插件webpack-dev-server，這種方式最常用。
3、插件webpack-dev-middleware
觀察模式webpack --watch
直接修改package.json即可
+ "watch": "webpack --watch",
運行命令npm run watch，修改你的代碼，然後刷新瀏覽器可以看到修改後的結果。
這種很簡單，可以直接應用命令，但是每次需要刷新瀏覽器。下面有更好的方式，使用插件webpack-dev-server或者webpack-dev-middleware自動刷新瀏覽器
例子鏈接：開發/demo8-watch/
使用 webpack-dev-server
webpack-dev-server 爲你提供了一個簡單的 web 服務器，並且能夠實時重新加載(live reloading)。讓我們設置以下：
npm install --save-dev webpack-dev-server
webpack.config.js
+ devServer: {
+ contentBase: './dist'
+ },
package.json
+ "start": "webpack-dev-server --open",
運行npm start，這時修改代碼，每次保存後，可以看到瀏覽器自動刷新了。
例子鏈接：開發/demo9_webpack-dev-server/
使用 webpack-dev-middleware
webpack-dev-middleware 是一個容器(wrapper)，它可以把 webpack 處理後的文件傳遞給一個服務器(server)。也就是這裏我們需要搭一個服務器，這裏用 node 的框架 express，快速搭一個服務器，並在裏面運用webpack-dev-middleware，實現自動刷新。
首先，安裝 express 和 webpack-dev-middleware：
npm install --save-dev express webpack-dev-middleware
webpack.config.js
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
+ publicPath: '/'
}
publicPath 也會在服務器腳本用到
新建server.js，這個便是服務器代碼
package.json
+ "server": "node server.js",
執行 npm run server，打開瀏覽器，跳轉到 http://localhost:3000，可以看到運行的結果。
每次修改代碼，瀏覽器都會自動刷新。
例子鏈接:開發/demo10_webpack-dev-middleware/