一個合格的Webpack4配置工程師素養：第三部分
前兩篇
webpack配置分層
以前有提過webpack根據不一樣的環境咱們會加載不一樣的配置。咱們只須要提取出三部分。css
- base: 公共的部分
- dev: 開發環境部分
- prod: 生產環境部分
複製代碼
npm i -D webpack-merge
複製代碼
咱們這裏如今簡單分層：正式項目最好建立一個config/webpack目錄管理。html
下面是源代碼。vue
"scripts": {
"dev": "cross-env NODE_ENV=development npx webpack --progress --config webpack.dev.config.js",
"build": "cross-env NODE_ENV=production npx webpack --progress --config webpack.prod.config.js"
},
複製代碼
// webapck.base.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackplugin = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js',
module: {
rules: [
// 處理字體
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
// 文件大小小於limit參數，url-loader將會把文件轉爲DataUR
limit: 10000,
name: '[name]-[hash:5].[ext]',
output: 'fonts/',
// publicPath: '', 多用於CDN
}
},
// 處理文件
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
// 轉base64
{
loader: 'url-loader',
options: {
// 具體配置見插件官網
limit: 10000,
name: '[name]-[hash:5].[ext]',
outputPath: 'img/', // outputPath所設置的路徑，是相對於 webpack 的輸出目錄。
// publicPath 選項則被許多webpack的插件用於在生產模式下更新內嵌到css、html文件內的 url , 如CDN地址
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}
]
},
plugins: [
// 打包模板
new HtmlWebpackPlugin({
inject: true,
hash: true,
cache: true,
chunksSortMode: 'none',
title: 'Webapck4-demo', // 能夠由外面傳入
filename: 'index.html', // 默認index.html
template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}),
// 清理dist目錄
new CleanWebpackplugin(['dist'])
]
}
複製代碼
// webpack.dev.config.js
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config.js')
module.exports = merge(baseWebpackConfig, {
mode: 'development',
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css/scss/sass
{
test: /\.(sc|sa|c)ss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: (loader) => [
require('autoprefixer')({
browsers: [
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie > 8'
]
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
}
})
複製代碼
// webapck.prod.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssertsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config.js')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = merge(baseWebpackConfig, {
mode: 'production',
output: {
filename: 'bound.[hash:5].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css/scss/sass
{
test: /\.(sc|sa|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('autoprefixer')({
browsers: [
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie > 8'
]
})
]
}
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
// 提取CSS
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash:5].css', // 設置輸出的文件名
chunkFilename: devMode ? '[id].css': '[id].[hash:5].css'
})
],
optimization: {
minimizer: [
// 壓縮JS
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
// 等等詳細配置見官網
}),
// 壓縮CSS
new OptimizeCSSAssertsPlugin({})
]
}
})
複製代碼
webpack配置js使用sourceMap
在webpack4使用inline-source-map選項就能夠啓動錯誤的堆棧跟蹤, 只用於開發環境node
devtool: 'inline-source-map'
複製代碼
監控文件變化自動編譯
簡單的方法就是啓動watch模式: 如react
"dev": "cross-env NODE_ENV=development npx webpack --progress --config webpack.dev.config.js --watch"
複製代碼
webpack開啓熱更新和代理配置
很明顯上面watch模式效率不高並且很不方便, 編譯完還須要刷新頁面, webpack能夠開啓熱更新模式，大大加速開大效率。jquery
npm i -D webpack-dev-server
複製代碼
修改script腳本。webpack
"dev": "cross-env NODE_ENV=development npx webpack-dev-server --progress --config webpack.dev.config.js"
複製代碼
修改配置文件git
const webpack = require('webpack')
plugins: [
new webpack.NamedModulesPlugin(), // 更方便查看patch的依賴
new webpack.HotModuleReplacementPlugin() // HMR
],
devServer: {
clientLogLevel: 'warning', // 輸出日誌級別
hot: true, // 啓用熱更新
contentBase: path.resolve(__dirname, 'dist'), // 告訴服務器從哪裏提供內容
publicPath: '/', // 此路徑下的打包文件可在瀏覽器下訪問
compress: true, // 啓用gzip壓縮
// publicPath: './',
disableHostCheck: true,
host: '0.0.0.0',
port: 9999,
open: true, // 自動打開瀏覽器
overlay: { // 出現錯誤或者警告時候是否覆蓋頁面線上錯誤信息
warnings: true,
errors: true
},
quiet: true,
proxy: { // 設置代理
'/dev': {
target: 'http://dev.xxxx.com.cn',
changeOrigin: true,
pathRewrite: {
'^/dev': ''
}
/**
* 若是你的配置是
* pathRewrite: {
'^/dev': '/order/api'
}
即本地請求 /dev/getOrder => 其實是 http://dev.xxxx.com.cn/order/api/getOrder
*/
},
'/test': {
target: 'http://test.xxxx.com.cn',
changeOrigin: true,
pathRewrite: {
'^/test': ''
}
},
'/prod': {
target: 'http://prod.xxxx.com.cn',
changeOrigin: true,
pathRewrite: {
'^/prod': ''
}
}
},
watchOptions: { // 監控文件相關配置
poll: true,
ignored: /node_modules/, // 忽略監控的文件夾, 正則
aggregateTimeout: 300, // 默認值, 當你連續改動時候, webpack能夠設置構建延遲時間(防抖)
}
}
複製代碼
webpack啓用babel轉碼
npm i -D babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime
複製代碼
修改配置文件es6
// 編譯js
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader?cacheDirectory', // 經過cacheDirectory選項開啓支持緩存
options: {
presets: ['@babel/preset-env']
}
}
},
複製代碼
增長.babelrc配置文件github
// 僅供參考
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false,
"absoluteRuntime": "@babel/runtime"
}
]
]
}
複製代碼
webpack配置eslint校驗
npm i -D eslint eslint-loader
// 校驗規則
npm i -D babel-eslint standard
複製代碼
修改webpack配置文件
// 編譯js
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader?cacheDirectory', // 經過cacheDirectory選項開啓支持緩存
options: {
presets: ['@babel/preset-env']
}
},
{
loader: 'eslint-loader',
options: {
fix: true
}
}
]
},
複製代碼
增長.eslintrc.js文件
/*
* ESLint的JSON文件是容許JavaScript註釋的，但在gist裏顯示效果很差，因此我把.json文件後綴改成了.js
*/
/*
* ESLint 配置文件優先級：
* .eslintrc.js(輸出一個配置對象)
* .eslintrc.yaml
* .eslintrc.yml
* .eslintrc.json（ESLint的JSON文件容許JavaScript風格的註釋）
* .eslintrc（能夠是JSON也能夠是YAML）
* package.json（在package.json裏建立一個eslintConfig屬性，在那裏定義你的配置）
*/
/*
* 你能夠經過在項目根目錄建立一個.eslintignore文件告訴ESLint去忽略特定的文件和目錄
* .eslintignore文件是一個純文本文件，其中的每一行都是一個glob模式代表哪些路徑應該忽略檢測
*/
module.exports = {
//ESLint默認使用Espree做爲其解析器
//同時babel-eslint也是用得最多的解析器
//parser解析代碼時的參數
"parser": "babel-eslint",
"parserOptions": {
//指定要使用的ECMAScript版本，默認值5
"ecmaVersion": 6
//設置爲script(默認)或module（若是你的代碼是ECMAScript模塊)
// "sourceType": "script",
//這是個對象，表示你想使用的額外的語言特性,全部選項默認都是false
// "ecmafeatures": {
// //容許在全局做用域下使用return語句
// "globalReturn": false,
// //啓用全局strict模式（嚴格模式）
// "impliedStrict": false,
// //啓用JSX
// "jsx": false,
// //啓用對實驗性的objectRest/spreadProperties的支持
// "experimentalObjectRestSpread": false
// }
},
//指定環境，每一個環境都有本身預約義的全局變量，能夠同時指定多個環境，不矛盾
"env": {
//效果同配置項ecmaVersion同樣
"es6": true,
"browser": true,
"node": true,
"commonjs": false,
"mocha": true,
"jquery": true,
//若是你想使用來自某個插件的環境時，確保在plugins數組裏指定插件名
//格式爲：插件名/環境名稱（插件名不帶前綴）
// "react/node": true
},
//指定環境爲咱們提供了預置的全局變量
//對於那些咱們自定義的全局變量，能夠用globals指定
//設置每一個變量等於true容許變量被重寫，或false不容許被重寫
"globals": {
"globalVar1": true,
"globalVar2": false
},
//ESLint支持使用第三方插件
//在使用插件以前，你必須使用npm安裝它
//全局安裝的ESLint只能使用全局安裝的插件
//本地安裝的ESLint不只可使用本地安裝的插件還可使用全局安裝的插件
//plugin與extend的區別：extend提供的是eslint現有規則的一系列預設
//而plugin則提供了除預設以外的自定義規則，當你在eslint的規則裏找不到合適的的時候
//就能夠借用插件來實現了
"plugins": [
// "eslint-plugin-airbnb",
//插件名稱能夠省略eslint-plugin-前綴
// "react"
],
//具體規則配置
//off或0--關閉規則
//warn或1--開啓規則，警告級別(不會致使程序退出)
//error或2--開啓規則，錯誤級別(當被觸發的時候，程序會退出)
"rules": {
"eqeqeq": "warn",
//你也可使用對應的數字定義規則嚴重程度
"curly": 2,
//若是某條規則有額外的選項，你可使用數組字面量指定它們
//選項能夠是字符串，也能夠是對象
"quotes": ["error", "double"],
"one-var": ["error", {
"var": "always",
"let": "never",
"const": "never"
}],
//配置插件提供的自定義規則的時候，格式爲：不帶前綴插件名/規則ID
// "react/curly": "error"
},
//ESLint支持在配置文件添加共享設置
//你能夠添加settings對象到配置文件，它將提供給每個將被執行的規則
//若是你想添加的自定義規則並且使它們能夠訪問到相同的信息，這將會頗有用，而且很容易配置
"settings": {
"sharedData": "Hello"
},
//Eslint檢測配置文件步驟：
//1.在要檢測的文件同一目錄裏尋找.eslintrc.*和package.json
//2.緊接着在父級目錄裏尋找，一直到文件系統的根目錄
//3.若是在前兩步發現有root：true的配置，中止在父級目錄中尋找.eslintrc
//4.若是以上步驟都沒有找到，則回退到用戶主目錄~/.eslintrc中自定義的默認配置
"root": true,
//extends屬性值能夠是一個字符串或字符串數組
//數組中每一個配置項繼承它前面的配置
//可選的配置項以下
//1.字符串eslint：recommended，該配置項啓用一系列核心規則，這些規則報告一些常見問題，即在(規則頁面)中打勾的規則
//2.一個能夠輸出配置對象的可共享配置包，如eslint-config-standard
//可共享配置包是一個導出配置對象的簡單的npm包，包名稱以eslint-config-開頭，使用前要安裝
//extends屬性值能夠省略包名的前綴eslint-config-
//3.一個輸出配置規則的插件包，如eslint-plugin-react
//一些插件也能夠輸出一個或多個命名的配置
//extends屬性值爲，plugin：包名/配置名稱
//4.一個指向配置文件的相對路徑或絕對路徑
//5.字符串eslint：all，啓用當前安裝的ESLint中全部的核心規則
//該配置不推薦在產品中使用，由於它隨着ESLint版本進行更改。使用的話，請本身承擔風險
"extends": [
"standard"
]
}
複製代碼
增長.eslintignore文件
/dist/
/node_modules/
/*.js
複製代碼
webpack配置resolve模塊解析
配置alias方便路徑的檢索效率。 配置文件默認擴展名，import時候自動匹配。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve(__dirname, 'src/')
}
},
複製代碼
webpack配置外部擴展externals
externals選項能夠提供排除打包某些依賴到boundle的方法.例如咱們想經過CDN引入jQuery而不是把jQuery打包到boudle。
這裏以jQuery爲例:
修改配置文件
// 配置外部依賴不會打包到boudle
externals: {
jquery: 'jQuery'
},
複製代碼
在模板文件引入CDN
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<div class="logo"></div>
<div class="man"></div>
</body>
</html>
複製代碼
在index.js使用jquery
import $ from 'jquery'
// 測試外部擴展配置
$(function () {
$('.logo').click(function () {
console.log('click')
})
})
複製代碼
webpack打包報表分析以及優化
npm i -D webpack-bundle-analyzer
複製代碼
我單獨配置了一個命令進行打包分析:
"build:report": "cross-env NODE_ENV=production npx webpack --progress --config webpack.analysis.config.js"
複製代碼
固然你其實徹底能夠經過傳參數配置集成到prod那個配置文件如：
"build:report": "npm run build --report"
複製代碼
而後在prod配置環境中若是參數判斷:
// 僞代碼
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
複製代碼
這裏給出個人方案
const merge = require('webpack-merge')
const prodWebpackConfig = require('./webpack.prod.config.js')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = merge(prodWebpackConfig, {
plugins: [
new BundleAnalyzerPlugin() // 打包分析
]
})
複製代碼
倉庫地址
有用的話點個star, 有問題歡迎提issues。
相關文章
- 1. 一個合格的Webpack4配置工程師素養：第一部分
- 2. 一個合格的Webpack4配置工程師素養：第二部分
- 3. 全乾工程師的自我修養---vue第一部分
- 4. 做爲一個運維工程師應有的素養
- 5. 一名合格QA的基本素養
- 6. 聊聊工程師的職業素養
- 7. 前端工程師的基本素養
- 8. Web全棧工程師基本素養
- 9. 作一個 「Webpack 配置工程師」
- 10. 一個合格的程序員所具有的素質和修養
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章