Webpack4 入門
本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(static module bundler)。
Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。
2. 安裝
Webpack4 將命令列相關抽離到 webpack-cli 中，所以要使用 webpack 也要安裝 webpack-cli。
npm install webpack webpack-cli webpack-dev-server -g
3. 核心概念
webpack 最核心的概念主要有以下四個：
- entry （入口）
- output（輸出）
- loader（載入器）
- plugins（外掛）
3.1 entry（入口）
entry 指定 weipack 應該使用哪個模組來作為構建內部依賴的開始。多頁面應用也在這裡配置。
webpack.config.js 的 entry 配置示例如下：
var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: './src/js/index.js',
hello: './src/js/hello.js'
}
};
3.2 output (輸出)
output 選項可以控制 webpack 如何向硬碟寫入編譯檔案。注意，即使可以存在多個入口起點，但只指定一個輸出配置。
webpack.config.js 的 output 配置示例如下：
var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: './src/js/index.js',
hello: './src/js/hello.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash].js'
},
};
3.3 loader（載入器）
loader 用於對模組的原始碼進行轉換。loader 可以使你在 import 或”載入”模組時預處理檔案。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將檔案從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯影象轉換為 data URL。loader 甚至允許你直接在 JavaScript 模組中 import CSS檔案！
常用的 loader 有 style、css、url、html等。安裝外掛命令如下：
npm install --save-dev css-loader style-loader
webpack.config.js 的 loader 配置示例如下：
module.exports = {
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 10000, // size <= 20KB
publicPath: "static/",
outputPath: "static/"
}
}
]
}
]
}
};
3.4 plugins（外掛）
外掛是 webpack 的支柱功能。webpack 自身也是構建於，你在 webpack 配置中用到的相同的外掛系統之上！外掛目的在於解決 loader 無法實現的其他事。
webpack.config.js 的 plugins 的配置示例如下：
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
// filename: "index.html",
template: "./src/index.html",
inject: "head",
// chunks: ["src"], // entry中的app入口才會被打包
minify: {
// 壓縮選項
collapseWhitespace: true
},
title: 'webpack test title'
})
]
};