從 webpack-----從入門到精通（一）我們知道了webpack的基本配置的相關信息，不過在第一步的操作的，每次生成新的文件，我們都要自己去引入，是不是覺得webpack不是應該自動，爲啥還要我們手動，其實是因爲我們還沒用到它的其他方法，今天我們就來介紹他的另外一個配置插件------plugins，

是 webpack 的支柱功能。webpack 自身也是構建於，你在 webpack 配置中用到的相同的插件系統之上！

插件目的在於解決 loader 無法實現的其他事。

更多的插件可以去這個查看插件鏈接

這裏就拿幾個出來

我們要使用哪個插件就要對應的引入對應的插件通過 npm i 插件名字 -D可以引入對應的插件

一.HtmlWebpackPlugin

介紹 : 簡化了HTML文件的創建，以便爲你的webpack包提供服務。這對於在文件名中包含每次會隨着編譯而發生變化哈希的 webpack bundle 尤其有用。你可以讓插件爲你生成一個HTML文件

npm i html-webpack-plugin -D

接下來就是在我們剛纔的webpack.config.js中引入對應的插件

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-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 HtmlWebpackPlugin()]
}

然後我們在重新運行webpack，我們就發現除了剛纔生成的JS文件以外還多一個html，默認名字都是index

它會默認幫我們把剛纔生成的JS文件填寫進去，這樣就不用每次打包後自己再去引入;

基本配置這個可以根據需求去配置

const path = require('path'); //nodejs的語法，引入路徑模塊，爲了輸出的時候找絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	// entry: ['./js/index.js', './js/two.js', ],
	entry: {
		one: './js/index.js',
		two: ['./js/index.js', './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 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, //移除註釋
		},
	})]
}

模板根據需求添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			<title>
				<%= htmlWebpackPlugin.options.title %>
			</title>
		</title>
		<% for (var css in htmlWebpackPlugin.files.css) { %>
		<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
		<% } %>
	</head>
	<body>

	</body>
	<script type="text/javascript">

	</script>
	<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
	<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
	<% } %>
</html>

模板的建立可以讓我們可以減少很多複用性的東西我們也可以生成多個入口文件去匹配對應的入口比如 PC端的移動端的網頁的等等

而當我們在使用上面的插件的時候每次都要刪除對應的文件在來生成這樣每次操作也有有點煩這樣我們就可以使用clean-webpack-plugin來清除文件在生成對應的文件

clean-webpack-plugin

老規矩先安裝

npm i clean-webpack-plugin -D

引入

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, //移除註釋
			},
		})
	]
}

他就能先清除後在重新生成新的文件而不是我們去刪除

更多的插件可以在webpack插件官網和npm 官網上查看 npm是外網訪問有點忙請耐心等候

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

一.HtmlWebpackPlugin

clean-webpack-plugin

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以太網驅動總結