webpack簡介與常用配置之外掛
寫在前面，近期有想法整理一下前端工程化相關的知識，就先從打包工具開始吧；今天帶來的是webpack相關的一些常用外掛配置，後期有時間話，也會出一些比較輕量級的打包工具的配置 gulp, rullup...相對於webpack學習成本更低一些
介紹
webpack 是一個現代 JavaScript 應用程式的靜態模組打包工具。當 webpack 處理應用程式時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖會對映專案所需的每個模組，並生成一個或多個 bundle
概念
- 入口
- 輸出
- loader
- 外掛
- 模式
配置檔案
- 專案根目錄下建立 webpack.config.js
執行啟動
- ./node_modules/.bin/webpack
- npx webpack
- 配置 npm 指令碼
1.CopyWebpackPlugin (外掛)
CopyWebpackPlugin 能夠實現將某些檔案或資料夾進行拷貝
安裝
npm install --save-dev copy-webpack-plugin
webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin([
{ from: 'source', to: 'dist' },
]),
],
};
2.HtmlWebpackPlugin (外掛)
HtmlWebpackPlugin 簡化了html的建立，以便為你的webpack包提供服務。
安裝
npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
],
};
3.CleanWebpackPlugin (外掛)
CleanWebpackPlugin 能幫忙每次打包之前先刪除dist資料夾。
安裝
npm install --save-dev clean-webpack-plugin
webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
4.ProgressPlugin (外掛)
ProgressPlugin 提供了一種自定義編譯期間如何報告進度的方法。
webpack.config.js
const { ProgressPlugin } = require('webpack');
module.exports = {
plugins: [
new ProgressPlugin()
]
}
5.DefinePlugin (外掛)
DefinePlugin 能建立環境變數
webpack.config.js
const { DefinePlugin } = require('webpack');
module.exports = {
plugins: [
new DefinePlugin()
]
}
6.開發與生產時的不同配置
cli 時使用 --config 選項設定不同的配置檔案
// 開發
npx webpack --config webpack.config.js
// 生產
npx webpack --config webpack.config.prod.js
npm script 時
"scripts": {
"dev": "webpack --config webpack.config.js",
"build": "webpack --config webpac.config.prod.js"
},
7.webpack-dev-server
webpack-dev-server 能夠為我們提供一個簡單的 web server, 並且具有live reloading(實時重新載入) 功能。
安裝
npm install --save-dev webpack-dev-server
使用
開發時，將 webpack 命令修改為 webpack-dev-server 命令。
8.webpack-merge 模組
通過 webpack-merge 可以抽取出 開發與生產環境的相同的webapck配置。
安裝
npm install --save-dev webpack-merge
寫一個 webpack.config.base.js 並在這個檔案中寫入基本的webpack配置
在 webpack.config.dev.js 與 webpack.config.prod.js 中引入 webpack.config.base.js 然後使用 webpack-merge 進行重寫或合併的操作。
9.別名的配置
疼點：
src 下面目錄結構龐大且複雜的時候，可能引入模組會出現 ../../../../../../ 這種形式
那一天對檔案路徑調整了一下。import 的路徑也得跟著修改一下。
定義別名規則
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
}
最後，完整配置如下
webpack.config.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { ProgressPlugin } = require('webpack');
module.exports = {
// 1. 入口
entry: './src/index.js',
// 2. 出口
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
// 3. loader 規則
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
},
// 4. 外掛
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html')
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './public'),
to: path.resolve(__dirname, './dist')
},
]),
new CleanWebpackPlugin(),
new ProgressPlugin(),
]
}
webpack.config.dev.js
const merge = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {
plugins: [
new DefinePlugin({
'process.env': {
'NODE_ENV': '"development"'
}
})
],
mode: 'development',
devServer: {
contentBase: '/dist',
}
})
webpack.config.prod.js
const merge = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {
plugins: [
new DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
})
],
mode: 'production'
})
script設定
"scripts": {
"serve": "webpack-dev-server --open --config webpack.config.dev.js",
"build": "webpack --config webpack.config.prod.js"
},
- 開發執行npm run sreve
- 構建上線執行npm run build