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

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

從 webpack-----從入門到精通（三）我們瞭解 devserver 的方便，熱更新以及模式 mode 的切換

而今天我們來學習webpack的其他配置 --- module

1.module

這個module有什麼用呢，它可以讓我們把webpack裏的模塊通過配置，定義的規則變成我們想要的東西，因爲webpack只知道JS文件，其他的如 less，sass,es6，等等其他的文件那就無法識別，所以就需要我們去定義規則讓webpack可以識別去編譯對應的文件讓他生成瀏覽器可以識別的html,css,js，而想要編譯打包這些文件就需要藉助loader, 官方的介紹也是這樣

現在我們就來試試從樣式開始，從之前的配置我們可以看到我們沒有樣式CSS，那要什麼引入呢這裏就是要通過import來注入對應的樣式，不過之前我們也說過，webpack只識別JS文件，所以爲了讓webpack可以正確的編譯CSS，我們需要兩個插件

style-loader   //把處理完的css放到style標籤裏
css-loader     //處理css

第一步都是老規矩了注入依賴

npm i style-loader css-loader -D

添加CSS文件，並寫上樣式

在webpack.config.js配置解析CSS文件

module: {
		rules: [{
			test: /\.css$/, //以點開始css結尾的文件
			use: ['style-loader', 'css-loader'] //順序不能搞錯
		}]
	},

從webpack(一)知道入口文件在entry指定的文件裏，在入口文件引入樣式，路徑對應自己創建的CSS文件路徑

import '../css/index.css';

最後我們只需一下 npm run dev 就會看見我們寫的樣式會被編譯在html文件裏面了

這裏我們會發現webpack把所有的CSS都直接引入到頭部了，如果樣式少的話那還可以，但如果多了話會造成加載緩慢。樣式衝突，命名重疊等問題，這樣我們可以使用 mini-css-extract-plugin 它將css單獨打包成一個文件的插件，它爲每個包含css的js文件都創建一個css文件。它支持css和sourceMaps的按需加載。目前只有在webpack V4版本才支持使用該插件

引入插件 mini-css-extract-plugin

npm i mini-css-extract-plugin -D

在webpack.config.js配置，

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

在plugin 寫入 ,要在生成html之前不然不會生效

plugins: [

		new MiniCssExtractPlugin({
			filename: 'css/index.css' //文件目錄會放入output.path裏
		}),
	],

修改之前的module

module: {
		rules: [{
			test: /\.css$/,
			use: [MiniCssExtractPlugin.loader, "css-loader"] //代替style-loader
		}]
	},

完整的代碼

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-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 MiniCssExtractPlugin({
			filename: 'css/index.css' //文件目錄會放入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熱更新
	},
	module: {
		rules: [{
			test: /\.css$/,
			use: [MiniCssExtractPlugin.loader, "css-loader"] //代替style-loader
		}]
	},
}

執行一下 npm run build會發現在dist會生成一個新的css文件，而我們的HMLT也增加了新的LINK標籤

更多配置 https://github.com/webpack-contrib/mini-css-extract-plugin 去GitHub上查看

二.圖片的處理

上面處理CSS用到了插件，所以處理圖片我們也要用到插件這次我們用的是

file-loader   //解析地址
url-loader    //把圖片地址解析成base64

老規矩引入

npm i file-loader url-loader -D

在webpack.config.js的module配置規則編譯

module: {
		rules: [
			{
				test: /\.(jpg|png|gif)$/, // 在jpg,png,gif找其中  也可以添加多個
				use: {
					"loader" : 'file-loader',
					options : {
						outputPath : 'img/', //會在dist文件生成對應的圖片文件夾
					}
				}
			},
		]
	},

完整的配置

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-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 MiniCssExtractPlugin({
			// filename: 'css/index.css' ,//文件目錄會放入output.path裏
			filename: 'css/[name].css',
		}),
		new webpack.HotModuleReplacementPlugin(), //引入熱更新插件
		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, //自動打開
		// 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熱更新
	},
	module: {
		rules: [{
				test: /\.css$/, //以點開始css結尾的文件
				use: [
					//這是一個loader，如果loader需要給參數，就寫成對象的形式
					{
						loader: MiniCssExtractPlugin.loader, //loader是哪個
						options: { //所有的配置參數都要放在這個對象裏面
							publicPath: '../' //這個表示在css文件裏但凡用到地址的地方在其前面加個目錄'../'，這個是爲了能找到圖片
						}
					},
					'css-loader' //這個loader沒有其它選項就直接寫
				]
			},
			{
				test: /\.(jpg|png|gif)$/, // 在jpg,png,gif找其中  也可以添加多個
				use: {
					"loader" : 'file-loader',
					options : {
						outputPath : 'img/', //會在dist文件生成對應的圖片文件夾
					}
				}
			},
		]
	},
}

我們執行一下npm run build 會看見在dist文件夾生成一個 img的文件夾裏面放着對應的圖片

一些相關的配置，更多配置去webpack官網插件查看 file-loader

用了file-loader，我們還有一個url-loader，這個的話就可以把對於的圖片轉換成base64圖片，因爲在前幾步我們已經引入了。所以這裏我們直接引用

在module 寫對於的loader

module: {
		rules: [
		
			/* 轉換圖片的 
			url-loader */
			{
				test: /\.(jpg|png|gif)$/,
				//use:['file-loader']
				use: [{
					loader: 'url-loader', //把圖片轉成base64
					options: {
						limit: 50 * 1024, //小於50k就會轉成base64
						outputPath: 'img'
					}
				}]
			}
		]
	},

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-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 MiniCssExtractPlugin({
			// filename: 'css/index.css' ,//文件目錄會放入output.path裏
			filename: 'css/[name].css',
		}),
		new webpack.HotModuleReplacementPlugin(), //引入熱更新插件
		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, //自動打開
		// 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熱更新
	},
	module: {
		rules: [{
				test: /\.css$/, //以點開始css結尾的文件
				use: [
					//這是一個loader，如果loader需要給參數，就寫成對象的形式
					{
						loader: MiniCssExtractPlugin.loader, //loader是哪個
						options: { //所有的配置參數都要放在這個對象裏面
							publicPath: '../' //這個表示在css文件裏但凡用到地址的地方在其前面加個目錄'../'，這個是爲了能找到圖片
						}
					},
					'css-loader' //這個loader沒有其它選項就直接寫
				]
			},
			/*轉換圖片的 file-loader */
			// {
			// 	test: /\.(jpg|png|gif)$/, // 在jpg,png,gif找其中  也可以添加多個
			// 	use: {
			// 		"loader": 'file-loader',
			// 		options: {
			// 			outputPath: 'img/', //會在dist文件生成對應的圖片文件夾
			// 		}
			// 	}
			// },
			/* 轉換圖片的 
			url-loader */
			{
				test: /\.(jpg|png|gif)$/,
				//use:['file-loader']
				use: [{
					loader: 'url-loader', //把圖片轉成base64
					options: {
						limit: 50 * 1024, //小於50k就會轉成base64
					}
				}]
			}
		]
	},
}

我們在執行一下 npm run build 會發現引入的圖片已經變成base64編碼的圖片了

這裏用了url-loader，並沒有用file-loader，說明url-loader裏已經包含了file-loader的功能

一些相關的配置，更多配置去webpack官網插件查看 url-loader

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

1.module

二.圖片的處理

DAPPER 事務 TRANSACTION

Java中線程的創建方式

SASS的認識

uniapp插件-微信小程序富文本編輯器myeditor在H5內容沒顯示問題

vue-element-admin npm instatll 下載報錯

H5保存圖片到本地和預覽

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

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結