webpack-----從入門到精通（三）

從 webpack-----從入門到精通（一）我們知道了webpack的基本配置的相關信息，

而從 webpack-----從入門到精通（二）我們知道了plugins 的使用，讓用戶不用去處理一些簡單而有鼓譟的東西

而現在我們就要來學習webpack的另一個東西  devServer 這個插件 傳統的開發中 我們每次修改都要樣式 邏輯 都要把頁面刷新一下才可以看到效果，而且 ajax 請求在 file文件協議是發送不出去  得上傳到服務器上 或者本地搭建服務器纔可以，而 devServer 可以讓我們直接用戶 服務器的效果  可以實現 熱更新，ajax請求 的部署在服務器的效果 而不用去搭建

devServer 安裝

npm i webpack-dev-server -D

配置package.json：在script 添加一個 dev : webpack-dev-server

配置webpack.config.js 添加 devserver 選擇

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //引入清除文件插件
module.exports = {
	// entry: ['./js/index.js', './js/two.js', ],
	entry: {
		one: './js/index.js',
		two: ['./js/two.js', ],
	}, //入口文件爲main.js  
	output: { //輸出
		path: path.resolve(__dirname, 'dist'), //path.resolve爲nodejs的固定語法，用於找到當前文件的絕對路徑
		// filename: 'bundle.js' ,//輸出的文件名
		filename: '[name].bundle.js' //可以以name/id/hash放在中括號裏區分文件名
	},
	plugins: [
		
		new CleanWebpackPlugin(), //位置放在最上面，作用是先刪除dist目錄再創建新的dist目錄。參數在npm官網上有 默認會去清除output.path裏的路徑，webpack的output.path目錄中的所有文件將被刪除一次，但是目錄本身不會被刪除
		new HtmlWebpackPlugin({
			title: '陳小白',
			/*這個值對應html裏的title值 配置該項，它並不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取該配置項值， <title><%= htmlWebpackPlugin.options.title %></title>*/
			template: path.join(__dirname, 'default_index.ejs'), //模板文件地址。可以自定義模板
			filename: 'index.html', //文件名，默認爲index.html（路徑相對於output.path的值）   還可以爲輸出文件指定目錄位置（例如'html/index.html'）
			hash: false, //true|false，是否爲所有注入的靜態資源添加webpack每次編譯產生的唯一hash值，添加hash形式如下所示：html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
			/* 
			 允許插入到模板中的一些chunk，不配置此項默認會將entry中所有的thunk注入到模板中。在配置多個頁面時，每個頁面注入的thunk應該是不相同的，需要通過該配置爲不同頁面注入不同的thunk；
			 chunks: 'all', 所有的都引入
			 chunks: ['one'],  引入對應的JS 如果有多個相同的  可以通過 entry的 key : array 引入 如 
			 entry: {
			 	one: './js/index.js',
			 	two: ['./js/index.js', './js/two.js', ],
			 },
			 */
			chunks: 'all',
			excludeChunks: [], //這個與chunks配置項正好相反，用來配置不允許注入的thunk。 			
			xhtml: false, //true|fasle, 默認false；是否渲染link爲自閉合的標籤，true則爲自閉合標籤
			inject: true, //向template或者templateContent中注入所有靜態資源，不同的配置值注入的位置不經相同 1、true或者body：所有JavaScript資源插入到body元素的底部 2、head: 所有JavaScript資源插入到head元素中 3、false： 所有靜態資源css和JavaScript都不會注入到模板文件中
			minify: { //html-webpack-plugin內部集成了html-minifier
				collapseWhitespace: true, //壓縮空格
				removeAttributeQuotes: true, //移除引號
				removeComments: true, //移除註釋
			},
		})
	],
	devServer:{
		open : true,
	}
}

運行命令 npm run dev

這個時候我們可以通過 http://localhost:8083/ 看到自己的項目  端口號的是自己定義的 localhost也是可以自定義的

devServer: {
		open: true, //自動打開
		// host: '0.0.0.0',
		port: 8080, //端口
		// contentBase: path.join(__dirname, "dist"), //指向資源函數  默認是指向配置dist文件
		headers: {
			'token': '2121'
		}, //請求頭
		historyApiFallback: true,
		hot: true, // DevServer 默認行爲是在發現源代碼被更新後通過自動刷新整個頁面來做到實時預覽的， 開啓模塊熱替換功能後，它是通過在不刷新整個頁面的情況下通過使用新模塊替換舊模塊來做到實時預覽的 在package.json 配置 --hot 或者引入webpack的HotModuleReplacementPlugin熱更新
	}

這裏要講一下devserver的hot ,webpack 默認行爲是在發現源代碼被更新後通過自動刷新整個頁面來做到實時預覽的,頁面少的話影響差別不會太大，但一旦頁面多的話 每次刷新都是整個刷新 資源加載太多了，所以這裏我們通常會使用webpack裏的熱更新插件，

引入webpack

const webpack=require('webpack');

在plugins掛載插件 

new webpack.HotModuleReplacementPlugin() 

配置如下 

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack=require('webpack');
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin'); //引入清除文件插件
module.exports = {
	// entry: ['./js/index.js', './js/two.js', ],
	entry: {
		one: './js/index.js',
		two: ['./js/two.js', ],
	}, //入口文件爲main.js  
	output: { //輸出
		path: path.resolve(__dirname, 'dist'), //path.resolve爲nodejs的固定語法，用於找到當前文件的絕對路徑
		// filename: 'bundle.js' ,//輸出的文件名
		// filename: '[name].bundle.js' //可以以name/id/hash放在中括號裏區分文件名
	},
	plugins: [

		new CleanWebpackPlugin(), //位置放在最上面，作用是先刪除dist目錄再創建新的dist目錄。參數在npm官網上有 默認會去清除output.path裏的路徑，webpack的output.path目錄中的所有文件將被刪除一次，但是目錄本身不會被刪除
		new HtmlWebpackPlugin({
			title: '陳小白',
			/*這個值對應html裏的title值 配置該項，它並不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取該配置項值， <title><%= htmlWebpackPlugin.options.title %></title>*/
			template: path.join(__dirname, 'default_index.ejs'), //模板文件地址。可以自定義模板
			filename: 'index.html', //文件名，默認爲index.html（路徑相對於output.path的值）   還可以爲輸出文件指定目錄位置（例如'html/index.html'）
			hash: false, //true|false，是否爲所有注入的靜態資源添加webpack每次編譯產生的唯一hash值，添加hash形式如下所示：html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
			/* 
			 允許插入到模板中的一些chunk，不配置此項默認會將entry中所有的thunk注入到模板中。在配置多個頁面時，每個頁面注入的thunk應該是不相同的，需要通過該配置爲不同頁面注入不同的thunk；
			 chunks: 'all', 所有的都引入
			 chunks: ['one'],  引入對應的JS 如果有多個相同的  可以通過 entry的 key : array 引入 如 
			 entry: {
			 	one: './js/index.js',
			 	two: ['./js/index.js', './js/two.js', ],
			 },
			 */
			chunks: 'all',
			excludeChunks: [], //這個與chunks配置項正好相反，用來配置不允許注入的thunk。 			
			xhtml: false, //true|fasle, 默認false；是否渲染link爲自閉合的標籤，true則爲自閉合標籤
			inject: true, //向template或者templateContent中注入所有靜態資源，不同的配置值注入的位置不經相同 1、true或者body：所有JavaScript資源插入到body元素的底部 2、head: 所有JavaScript資源插入到head元素中 3、false： 所有靜態資源css和JavaScript都不會注入到模板文件中
			minify: { //html-webpack-plugin內部集成了html-minifier
				collapseWhitespace: true, //壓縮空格
				removeAttributeQuotes: true, //移除引號
				removeComments: true, //移除註釋
			},
		}),
		new webpack.HotModuleReplacementPlugin()    //引入熱更新插件
	],
	devServer: {
		open: true, //自動打開
		// host: '0.0.0.0',
		port: 8080, //端口
		// contentBase: path.join(__dirname, "dist"), //指向資源函數  默認是指向配置dist文件
		headers: {
			'token': '2121'
		}, //請求頭
		historyApiFallback: true,
		hot: true, // DevServer 默認行爲是在發現源代碼被更新後通過自動刷新整個頁面來做到實時預覽的， 開啓模塊熱替換功能後，它是通過在不刷新整個頁面的情況下通過使用新模塊替換舊模塊來做到實時預覽的 在package.json 配置 --hot 或者引入webpack的HotModuleReplacementPlugin熱更新
	}
}

有時候我們也可以在page.json中配置 添加 --hot 他也等同於上面的引入 

 

其他的配置在官方文檔有介紹，這裏就不一一列舉了 

mode的使用

官方的介紹提供 mode 配置選項，告知 webpack 使用相應模式的內置優化，其實簡單來說就是讓我們可以在開發模式下和上線模式下配合不同模式下的相關配置信息，默認爲開發模式，可以在生產模式和開發模式切換 唯一區別 開發環境的代碼不提供壓縮，生產環境的代碼提供壓縮。

 切換的方式，一個是在命令窗口執行命令

webpack --mode development
webpack --mode production

 

一個是在package.json配置 

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"dev" : "webpack-dev-server --hot --mode development",
	"build" : "webpack --hot --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "web-dev-server": "^1.6.7",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

 在命令運行npm run dev 的話執行開發模式 ，而執行 npm run build 的話就是生產模式