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