2. 程式人生 > >webpack4配置詳解之慢嚼細嚥

webpack4配置詳解之慢嚼細嚥

阿新 • • 發佈：2018-11-12

前言

  經常會有群友問起webpack、react、redux、甚至create-react-app配置等等方面的問題，有些是我也不懂的，慢慢從大家的相互交流中，也學到了不少。

​  今天就嘗試著一起來聊聊Webpack吧，旨在幫大家加深理解、新手更容易上路，都能從0到1搭建配置自定屬於自己的腳手架，或對已封裝好的腳手架有進一步的鞏固，接下來蘇南會詳細講解webpack中的每一個配置欄位的作用(部分為webpack4新增)。

近兩年，前端一直在以一個高速持續的過程發展，常常會有網友在調侃老了、學不動了，

雖是在調侃卻又間接闡述著無奈，迫於生活的壓力，不得不提速前行，

因為沒有誰為你而停留，公司不會、社會不會、同伴不會……，停下可能將意味著淘汰 —— 理想很豐滿，現實很骨感

，所以讓我們一起進步，共同加薪，奮鬥吧騷年，加油。。

～～吐槽過了，接著聊正事～～。

 原諒我控制不住自己，想問下各位，昨天剛剛過去的雙十一你脫單了嗎？

首席填坑官∙蘇南的專欄,webpack4配置，公眾號：honeyBadger8
默默說了句：沒脫～

  • 人生若只如初見，何事秋風悲畫扇；
  • 等閒變卻故人心，卻道故人心易變；
  • 驪山語罷清宵半，夜雨霖鈴終不怨。

各位大佬早安，這裡是@IT·平頭哥聯盟，我是首席填坑官∙蘇南，用心分享 做有溫度的攻城獅。
公Z號：honeyBadger8，群：912594095

entry

  • 這個不用解釋了，看名字就是知道，它就是通往天堂/地獄的入口，一切的苦難從這裡開始，也從這裡結束。
  • 簡單介紹幾種寫法：
//方式一：單檔案寫法
entry: {
	index: './src/pages/route.js',
	//about: './src/pages/about.js',
	//other:()=>{...}
}

//方式二：多檔案寫法
entry: {
	/*index:[
		'webpack-hot-middleware/client',
		'./src/root.js'
	],*/
	index: ['./src/root.js'],
	vendors : ['react','react-dom','redux','react-router','classnames'],
}
//首席填坑官∙蘇南的專欄,公Z好：honeyBadger8
 

複製程式碼

output - 輸出

  • 它位於物件最頂級鍵(非常重要)，如果說entry是一扇門，output就是審判官，決定著你是上天堂還是入地獄；
  • 指示 webpack 如何去輸出、以及在哪裡輸出、輸出的格式等；
  • path: 輸出檔案的目錄，
  • filename:輸出的檔名，它一般跟你entry配置相對應，如：js/[name].js name在這裡表示的是[index、vendors]，
  • chunkFilename：塊，配置了它，非入口entry的模組，會幫自動拆分檔案，也就是大家常說的按需載入，與路由中的 require.ensure相互應
  • publicPath：檔案輸出的公共路徑，
  • pathinfo：即保留相互依賴的包中的註釋資訊，這個基本不用主動設定它，它預設 development 模式時的預設值是 true，而在 production 模式時的預設值是 false，
  • 主要的就是這些，還有一些其他的library、libraryTarget、auxiliaryComment等,感興趣的可自行了解，
output: {
	path: path.resolve(__dirname, '../assets'),
	filename: 'js/[name].js',
	chunkFilename: 'js/[name].[chunkhash:8].js',
	publicPath: '/_static_/', //最終訪問的路徑就是：localhost:3000/_static_/js/*.js
	//pathinfo:true,
}
複製程式碼

hash

  • 常用的有三種：
模板 描述
hash 模組識別符號的hash,一般應用於filename：'[name].[hash].js'
chunkhash 按需分塊內容的 hash，它是根據chunk自身的內容計算而來
contenthash 這個沒有用過，看了下文件它是在提取css檔案時根據內容計算而來的 hash ，結合ExtractTextWebpackPlugin外掛使用
hash長度 預設20，可自定:[hash:8]、[chunkhash:16]

mode

  • 這個屬於webpack4才新增的，4之前大家一般用DefinePlugin外掛設定
  • mode：development``，production，none，
  • development : 開發模式，打包的程式碼不會被壓縮，開啟程式碼除錯，
  • production : 生產模式，則正好反之。

//方法一
webpack --mode development/production

//方法二
……
mode:'development/production'
……

複製程式碼

devtool

  • 控制是否生成，以及如何生成 source map檔案，開發環境下更有利於定位問題，預設 false,
  • 當然它的開啟，也會影響編譯的速度，所以生產環境一定一定記得關閉；
  • 常用的值：cheap-eval-source-map、eval-source-map、cheap-module-eval-source-map、inline-cheap-module-source-map等等，更詳細的可以去官方檢視；
  • 本人一般使用：eval-source-map較多，每個都有它不一樣的特性，有興趣的同學可以一一嘗試，

首席填坑官∙蘇南的專欄以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8
eval-source-map排查示例

optimization

  • optimization是webpack4新增的，主要是用來讓開發者根據需要自定義一些優化構建打包的策略配置，
  • minimize：true/false,告訴webpack是否開啟程式碼最小化壓縮，
  • minimizer：自定js優化配置，會覆蓋預設的配置，結合UglifyJsPlugin外掛使用，
  • removeEmptyChunks: bool 值，它檢測並刪除空的塊。將設定為false將禁用此優化，
  • removeEmptyChunks: bool 值，它檢測並刪除空的塊。將設定為false將禁用此優化，
  • nodeEnv：它並不是node裡的環境變數，設定後可以在程式碼裡使用 process.env.NODE_ENV === 'development'來判斷一些邏輯，生產環境UglifyJsPlugin會自動刪除無用程式碼，
  • splitChunks ：取代了CommonsChunkPlugin，自動分包拆分、程式碼拆分，詳細預設配置：
  • 預設配置，只會作用於非同步載入的程式碼塊 —— chunks: 'async'，它有三個值：all,async,initial
//環境變更也可以直接 在啟動中設定
 //webpack --env.NODE_ENV=local --env.production --progress

//splitChunks 預設配置
splitChunks: {
  chunks: 'async',
  minSize: 30000,
  maxSize: 0,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~',
  name: true,
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true
    }
  }
}
複製程式碼
  • runtimeChunk: 提取 webpack 執行時程式碼,它可以設定為：boolean、Object
  • 該配置開啟時，會覆蓋 入口指定的名稱！！！

optimization: {
	runtimeChunk:true,//方式一
  runtimeChunk: {
    name: entrypoint => `runtimechunk~${entrypoint.name}` //方式二
  }
}

複製程式碼

以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8
首席填坑官∙蘇南的專欄

resolve - 配置模組如何解析

  • extensions：自動解析確定的擴充套件,省去你引入元件時寫字尾的麻煩，
  • alias：非常重要的一個配置，它可以配置一些短路徑，
  • modules：webpack 解析模組時應該搜尋的目錄，
  • 其他 plugins、unsafeCache、enforceExtension，基本沒有怎麼用到，

//extensions 字尾可以省略，
import Toast from 'src/components/toast'; 

// alias ,短路徑
import Modal from '../../../components/modal' 
//簡寫
import Modal from 'src/components/modal' 


resolve: {
  extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
  alias: {
    src :path.resolve(__dirname, '../src'),
    components :path.resolve(__dirname, '../src/components'),
    utils :path.resolve(__dirname, '../src/utils'),
  },
  modules: ['node_modules'],
},

複製程式碼

module.rules - 編譯規則，

  • rules：也就是之前的loaders，
  • test ： 正則表示式，匹配編譯的檔案，
  • exclude：排除特定條件，如通常會寫node_modules，即把某些目錄/檔案過濾掉，
  • include：它正好與exclude相反，
  • use -loader ：必須要有它，它相當於是一個 test 匹配到的檔案對應的解析器，babel-loader、style-loader、sass-loader、url-loader等等，
  • use - options：它與loader配合使用，可以是一個字串或物件，它的配置可以直接簡寫在loader內一起，它下面還有presets、plugins等屬性；
  • 具體來看一下示例：

module: {
	rules: [
		{
			test: /\.(js|jsx)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: 'babel-loader',
					options: {
						presets: [
							['env',
							{
								targets: {
								browsers: CSS_BROWSERS,
							},
						}],'react', 'es2015', 'stage-0'
						],
						plugins: [
							'transform-runtime',
							'add-module-exports',
						],
					},
				},
			],
		},
		{
			test: /\.(scss|css)$/,
			use: [
				'style-loader',
				{loader: 'css-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
				{loader: 'postcss-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
				{loader: 'sass-loader',options:{sourceMap: true}}
			]
		},
		{
			test: /\.(png|jpg|jpeg|gif)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: 'url-loader?limit=12&name=images/[name].[hash:8].[ext]',
				},
			],
		},
		{
			test: /\.(woff|woff2|ttf|eot|svg)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: 'file-loader?name=fonts/[name].[hash:8].[ext]',
				},
			],
		},
	],
},//首席填坑官∙蘇南的專欄

複製程式碼

專案中常用loader

  • babel-loader、awesome-typescript-loader js*/ts編譯，
  • css-loader、postcss-loader、sass-loader、less-loader、style-loader 等css樣式處理
  • file-loader、url-loader、html-loader等圖片/svg/html等的處理，

plugins - 外掛

  • UglifyJsPlugin
  • HotModuleReplacementPlugin
  • NoEmitOnErrorsPlugin
  • HtmlWebPackPlugin
  • ExtractTextPlugin
  • PreloadWebpackPlugin
  • 等等，很多很多，外掛的詳解會留在下一章節詳細介紹，歡迎持續關注。

plugins/loader 區別

  • 新入門的一些同學可能會有些疑惑，不是有loader了嗎？為什麼還plugins呢，還要它做什麼？
  • loader的作用在於解析檔案，比如把ES6轉換成es5,甚至ES3,畢竟還有萬惡的IE嘛；把Sass、Less解析成CSS，給CSS自動加上相容的字首；對圖片進行一個解析等等；
  • plugins呢？它在幹啥？它在吹水、喝茶、嗑瓜子聊天，當然這是loader在沒有把專案做完之前，loader下班時間就是plugins苦難的開始，它要對loader乾的事情進行優化分類、提取精華(公共程式碼提取)、做壓縮處理(js/css/html壓縮)、輸出指定的目錄等……，反正也是很苦逼！

webpack-dev-server

  • 這個有些老生常談了，新手上路一般都有用它，
  • 公司因為現在是結合了 微服務，整套流程是結合：Dockerfile、nodejs、express等一起線上構建編譯的，所以大部分專案都不會走webpack-dev-server；
  • 我們開發環境就是使用 express + webpack-dev-middleware + webpack-hot-middleware+ '...';
  • contentBase ：告訴服務(dev server)在哪裡查詢檔案，預設不指定會在是當期專案根目錄，
  • historyApiFallback:可以是boolean、 object，預設響應的入口檔案，包括404都會指向這裡，object見下面示例：
  • compress：啟用 gzip 壓縮，
  • publicPath：它其實就是 output.publicPath，當你改變了它，即會覆蓋了output的配置，
  • stats： 可以自定控制要顯示的編譯細節資訊，
  • proxy：它其實就是http-proxy-middleware，可以進行處理一些代理的請求。

//方式一：不配置方式二的內容
 webpack-dev-server --config webpack/webpack.config.dev.js
//指定 埠： --port=8080 
//開啟熱更新：--hot
//gzip： --compress

//方式二
devServer : 
	contentBase:'./assets',
	host: '0.0.0.0',
	port: 9089,
	publicPath: '/assets/',
	historyApiFallback: {
		index: '/views/index.html'
	},
	/*
	匹配路徑，進入不同的入口檔案，首席填坑官∙蘇南的專欄,公Z好：honeyBadger8
	rewrites: [
			{ from: /^\/$/, to: '/views/landing.html' },
			{ from: /^\/subpage/, to: '/views/subpage.html' },
			{ from: /./, to: '/views/404.html' }
		]
	}
	*/
	compress: true,
	noInfo: true,
	inline: true,
	hot: true,
	stats: {
		colors: true,
		chunks: false
	},
	proxy:{
		'/mockApi': 'https://easy-mock.com/project/5a0aad39eace86040263d' ,//請求可直接寫成  /mockApi/api/login...
	}
}

複製程式碼

webpack4刪除的點：

  • module.loaders
  • NoErrorsPlugin
  • CommonsChunkPlugin
  • DefinePlugin
  • OccurenceOrderPlugin
  • 歡迎補充……，平時用到的大概就是這些

尾聲：

  以上就是工作中react自定腳手架的配置總結，希望能對您有所幫助，webpack4的改動蠻大的，功能比之前強大了少，也簡便了開發者很多的麻煩，效率大大提高，但同時也意味著我們對於底層的東西，瞭解的更少了，下一章將為大家分享一些常用的外掛/以及用法的分析，歡迎持續關注，記得點個贊哦，當然您能動動手指關注下方公眾號就更棒了，謝謝支援！

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅!，公眾號：honeyBadger8
用心分享 做有溫度的攻城獅

作者：蘇南 - 首席填坑官

連結：blog.csdn.net/weixin_4325…

交流：912594095、公眾好：honeyBadger8

本文原創，著作權歸作者所有。商業轉載請聯絡@IT·平頭哥聯盟獲得授權，非商業轉載請註明原連結及出處。

相關推薦

webpack4配置詳解之慢嚼細嚥

前言   經常會有群友問起webpack、react、redux、甚至create-react-app配置等等方面的問題，有些是我也不懂的，慢慢從大家的相互交流中，也學到了不少。 ​  今天就嘗試著一起來聊聊Webpack吧，旨在幫大家加深理解、新手更容易上路，都能從0到1搭建配置自定屬於自己的腳手架，或

webpack4配置詳解之新手上路初探

前言 　　經常會有群友問起webpack、react、redux、甚至create-react-app配置等等方面的問題，有些是我也不懂的，慢慢從大家的相互交流中，也學到了不少。 ​　　今天就嘗試著一起來聊聊Webpack吧，旨在幫大家加深理解、新手更容易上路，都能從0到1搭建配置自定屬於自己的腳手架

webpack4配置詳解之常用外掛分享

　　前言　　　　繼上一次webpack的基礎配置分享之後，本次將分享一些工作中專案常用的配置外掛、也會包含一些自己瞭解過覺得不錯的外掛，如有分析不到位的，歡迎糾錯，嗯，這些東西文件都有，大佬可繞過。　　　　Wepack4之後廢棄了很多的外掛，這裡只會講解webpack4還支援的（包含4之前外掛），已經廢棄的將

webpack4配置詳解之常用插件分享

dom turn false 所想 感謝 建議 tro isp 提取 　　前言　　　　繼上一次webpack的基礎配置分享之後，本次將分享一些工作中項目常用的配置插件、也會包含一些自己了解過覺得不錯的插件，如有分析不到位的，歡迎糾錯，嗯，這些東西文檔都有，大佬可繞過。　　　

Web.xml配置詳解之context-param

ltr 完成 數據庫 數據 鍵值對 art str htm 方法 轉自：http://blog.csdn.net/liaoxiaohua1981/article/details/6759206 格式定義： [html] view plaincopy

Nginx得Location配置詳解之精準匹配

location的匹配過程一、location 的定義 location 有“定位”的意思，根據Uri來進行不同的定位。 在虛擬主機的配置中，是必不可少得，location可以把網站的不同部分，定位到不同的處理方式上。二、location 的語法 location [

webpack4配置詳解之一步一步跟我做

前言 　　經常會有群友問起webpack、react、redux、甚至create-react-app配置等等方面的問題，有些是我也不懂的，慢慢從大家的相互交流中，也學到了不少。 ​　　今天就嘗試著一起來聊聊Webpack吧，旨在幫大家加深理解、新手更容易上路，都能從0到1搭建配置自定屬於自己的腳手架

Web.xml配置詳解之context-param,listener

 格式定義： [html]  view plain copy <c

深入淺出Mybatis原始碼系列（三）---配置詳解之properties與environments（mybatis原始碼篇）

上篇文章《深入淺出Mybatis原始碼系列（二）---配置簡介（mybatis原始碼篇）》我們通過對mybatis原始碼的簡單分析，可看出，在mybatis配置檔案中，在configuration根節點下面，可配置properties、typeAliases、plugins、

FastDFS的配置、部署與API使用解讀（4）FastDFS配置詳解之Client配置

一種方式是通過呼叫ClientGlobal類的初始化方法對配置檔案進行載入，另一種是通過呼叫API逐一設定配置引數。後一種方式對於使用Zookeeper等載入屬性的方式很方便。 1. 載入配置檔案： String configFileName = "conf/dfs-c

nginx配置詳解之http模組

HTTP模組控制著nginx http處理的所有核心特性 以下為常用配置: http{ include mime.types; default_type application/octet-stream; client_header_buffer_

nginx配置詳解之location模組

       在前幾篇博文中我提到過的 nginx除了是一款的web伺服器外  nginx還是一個小型的反向代理伺服器  我們可以使用nginx將一些靜態檔案 例如css js images 儲存在客戶端本地  下次請求的時候直接從本地讀取 加快頁面響應速度 又比如 我們可

nginx配置詳解之main模組

nginx常用全域性配置如下: user nginx; worker_processes = 1; error_log /var/log/nginx/error.log; worker_rlimit_nofile 20000; pid /var/run/ng

深入淺出Mybatis系列（三）---配置詳解之properties與environments（mybatis原始碼篇）

上篇文章《深入淺出Mybatis系列（二）---配置簡介（mybatis原始碼篇）》我們通過對mybatis原始碼的簡單分析，可看

Java程式設計師從笨鳥到菜鳥之（七十二）細談Spring（四）利用註解實現spring基本配置詳解

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Java程式設計師從笨鳥到菜鳥之（七十四）細談Spring（六）spring之AOP基本概念和配置詳解

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！                       首先我們來看一下官方文件所給我們的關於AOP的一些概念性詞語的解釋：切面（Aspect）：一個關注點的模組化，這個關注點可能會橫切多個物件。事務管

SpringMVC 框架系列之組件概述與配置詳解

align 概述 handle ont htm 配置文件 掃描器 springmvc 解析 在上一篇文章 SpringMVC 框架系列之初識與入門實例 的實例中，我們已經知道，SpringMVC 框架是一個 web 層的框架，本篇文章就詳細解釋一下 SpringMVC 框架

Mysql之my.cnf配置詳解

線程池 ext 自動刪除 statement arr 網絡 決定 而不是 amp Mysql之my.cnf配置詳解 mysql5.6的版本有400多個變量可以配置,可以通過下列命令獲得mysql> show variables; 配置文件參數如下： #客戶端設置，即

Spring 基礎教程之四：JavaBean基本配置詳解

一：xml 裝配JavaBean屬性含義： 1.id:指定該Bean 的唯一標識。 2.class:指定該Bean 的全限定名。 3.name:為該Bean 指定一到多個別名。多個別名可以用“，”和“；”分割。

Spring-boot入門之配置詳解

1.配置檔案 spring-boot預設有兩種配置檔案 appliation.properties appliation.yml 配置檔案預設放在src/main/resources目錄或者是類路徑/config下 配置檔案的作用：修改sprin