一. 起步
1. 使用配置文件
|- /dist
|- index.html
|- /src
|- index.js
|- webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist');
},
};
2. 使用 NPM Scripts
{
"scripts": {
"build": "webpack --config webpack.config.js"
},
}
二. 管理資源
- 為了使 webpack 能夠打包處理除了 JavaScript 的其他類型文件（.css, .jpg, .ts, ...），需要使用 Loader 來做中間處理
- 首先應(yīng)當先安裝對應(yīng)的 Loader
// 處理 CSS
npm install --save-dev style-loader css-loader
// 處理圖片（png|svg|jpg|gif）
npm install --save-dev file-loader
- 對 webpack.config.js 的相應(yīng)配置
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}],
},
- webpack 會分析文件的類型并用正則去匹配确徙，找到對應(yīng)的配置，并使用指定的一個或多個 Loader 進行流式解析
- 在適當?shù)那闆r下，可以將模塊與資源分離到同一目錄中并進行封裝隅肥，在某些場合下颊亮，這樣使你的組件/模塊更具備可移植性，統(tǒng)一的放置資源會造成強烈的耦合，然而并沒有一成不變的配置方式，最好的永遠是最適合自己項目應(yīng)用場景的
三. 管理輸出
- 當輸出文件涉及到 hash 文件名時，沒辦法在根 index.html 中固定的指定 src椎木，然而可以使用 HtmlWebpackPlugin 來解決這個問題
- 當使用自動的生成構(gòu)建時，目標文件夾可能存在曾經(jīng)的遺留文件博烂，因為文件的名稱存在 hash香椎，所以并不會替代掉舊的文件，可以使用 CleanWebpackPlugin 插件來清空 dist 文件夾
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[hash:8].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ title: 'Hello Webpack!' }),
],
};
四. 開發(fā)
1. 使用 Source Map
// webpack.config.js
devtool: 'inline-source-map',
2. 使用 webpack-dev-server
- 需要安裝
webpack-dev-server 插件
npm install webpack-dev-server --save-dev
- 配置
webpack.config.js 在 localhost:8080 下建立服務(wù)禽篱，并將 dist 目錄下的文件畜伐，作為可訪問文件
devServer: {
contentBase: './dist',
},
- 使用
webpack-dev-server --open 命令運行開發(fā)服務(wù)器
3. 使用 webpack-dev-middleware
- webpack-dev-middle 將 webpack 處理的文件發(fā)送到服務(wù)器的包裝器，它在 webpack-dev-server 內(nèi)部使用躺率，但它可以作為單獨的包引用玛界，以允許更多的自定義設(shè)置，通常將其和服務(wù)器相結(jié)合來使用
- 首先安裝 express 和 webpack-dev-middleware
npm install express webpack-dev-middleware --save-dev
- 修改 webpack.config.js 的 publicPath
output: {
//...
publicPath: '/',
},
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.listen(3000);
- 使用 node server.js 來運行服務(wù)器悼吱，啟動瀏覽器并進入 http://localhost:3000 來訪問慎框，當源碼的內(nèi)容發(fā)生變化時，webpack-dev-middleware 會檢測到變化并將其在內(nèi)存中寫入更新后添，但這并不會導(dǎo)致瀏覽器的自動刷新笨枯，必須手動刷新才會讓瀏覽器感受到本次的變化，而并不需要重新啟動服務(wù)器
4. 使用 HMR
const webpack = require('webpack');
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
