Webpack-2 - 台部落

一 .打包靜態資源（圖片，樣式，圖標等）

1.安裝

npm install --save-dev file-loader

2.webpack.config.js配置：

module.exports = {
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: "[name].[ext]",
					outputPath: "./images",
					
				},


			}
		}, ]
	}
}

test：對相應後綴進行打包

loader:打包器，使用file-loader打包

name:打包進dist目錄中的文件名，[]是佔位符，上面的示例是打包成圖片原來的名稱，[hash].[ext]就是哈希值生成的文件名，ext表示後綴

outputPath:輸出文件在dist文件內的所在的路徑，上面的示例表示在dist文件夾下有一個images文件夾，裏面有一個car.jpg的圖片

3.在js文件中的用法

import carImg from './image/car.jpg';
let car=new Image();
car.src=carImg;

4.打包命令

npx webpack

webpack是局部安裝的，所以要加上npx命令

文檔：https://www.webpackjs.com/loaders/file-loader/

二.使用url-loader

1.安裝

npm install --save-dev url-loader

2.webpack.config.js配置：

module.exports = {
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: "[name].[ext]",
					outputPath: "./images",
                                        limit:1024,
					
				},


			}
		}, ]
	}
}

區別就是多了一個limit參數，表示圖片小於1KB，則以base64編碼的形式顯示圖片，減少HTTP請求

其它用法一致

文檔：https://www.webpackjs.com/loaders/url-loader/

三.打包CSS文件

1.安裝

npm install --save-dev css-loader
npm install style-loader --save-dev

文檔：https://www.webpackjs.com/loaders/style-loader/

https://www.webpackjs.com/loaders/css-loader/

2.webpack.config.js配置：


module.exports = {
	module: {
		rules: [{
			test: /\.css$/,
 			use: ["style-loader","css-loader"],
		}, ]
	}
}

如果想自動加瀏覽器前綴使用postcss-loader

3.在JS文件中的用法

注意CSS文件，在react裏面是全局的，vue又支持模塊化的CSS，我理解是自動重命名CSS文件。

全局用法:

  import './style/index.css';
 let car=new Image();
  car.src=carImg;
  car.classList.add("car");

模塊化的用法

import style from './style/index.css';
let car=new Image();
car.src=carImg;
car.classList.add(style.car);

另外需要在webpack.config.js設置modules:true

{
	test: /\.css$/,
	use: ["style-loader",
	{
		loader: "css-loader",
		options: {
			importLoaders: 2,
			modules: true
		}
	}, ]
},

如果要識別帶瀏覽器前綴的CSS屬性

-webkit- (谷歌, Safari, 新版Opera瀏覽器, 以及幾乎所有iOS系統中的瀏覽器(包括iOS 系統中的火狐瀏覽器); 簡單的說，所有基於WebKit 內核的瀏覽器)
-moz- (火狐瀏覽器)
-o- (舊版Opera瀏覽器)
-ms- (IE瀏覽器和 Edge瀏覽器)

則需要設置：

{
	test: /\.css$/,
	use: ["style-loader",
	{
		loader: "css-loader",
		options: {
			importLoaders: 2,
			modules: true
		}
	}, 
		 "postcss-loader"
		 
		 ]
},

安裝：

npm i -D postcss-loader

postcss.config.js

postcss-loader exposes context ctx to the config file, making your postcss.config.js dynamic, so can use it to do some real magic

文檔：https://www.webpackjs.com/loaders/postcss-loader/

同理還有sass-loader,用於打包sass語法的css樣式

四.導入圖標icon

1.安裝

使用file-loader打包

2.webpack.config.js配置：

	{
		test: /\.(eot|svg|ttf|woff)$/,
		use: {
			loader: 'file-loader',
		}
	}

3.在JS文件中的用法

import fontStyle from './style/font.css'
let font=document.createElement("div");
font.classList.add(fontStyle["iconfont"]);
font.classList.add(fontStyle["icon-dianchi"]);
root.appendChild(font);

在element中的結果如下：

圖標文件下載地址：https://www.iconfont.cn/

font.css文件如下：

@font-face {font-family: "iconfont";
  src: url('../font/iconfont.eot?t=1591849603771'); /* IE9 */
  src: url('../font/iconfont.eot?t=1591849603771#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAACCAAAANoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqEDIM5ATYCJAMMCwgABCAFhG0HOxv8BsiemjyKBc8CuABYHgCMUBDweX7zkrT+FE/mQtAR1ml7/2vtzKP4nEaNl0wgaf/v76zJrLeAlUCldCoJEEBf0+QHx1I/xfOAHqTRq6my8AGfH+jBopJim/AGMtIxb5hevoY8EPshAD3uQonc/MeXRAEFPkwAomc3iSUKGQcKCgtrEagr5qqcxFxUaKVp0k1gTvDz4iPRaUFCJcPHlnQ+CYntm7w3+fJY01gNBgFvOh3AFoEMhAIFRFWloYR0FAglo3cCGXyxrW4C3uSbTLzJMyrEVv/xJBBqeKoRgEAoka6Ip6RcGg8GkYBrXwRqwBssB84grK3OkZ4zoXSslsftCLDYtA2pboYWm6cvMvQx33jSUbKSx53ua4axzgLzPtREH3MsWujgdiqi3YhZmwE9ClmPrZa0NQsCTjf2EMo2bw8ryXKEjJNHWCpWdbADJVGtxzDcIE1RpTYZM62z7XHPw57HbTvPp1nkWtT/rzdfdMj+8Fi0/UL6tehh/Db1m9e02CmxASOcbr+1XfF78b3zXa93bfg9WHawi/2Y/zHJB//Z//P+5wCjRtZHzuK9uSJnqFn4D/Zy3DfGYcyPvb2D/RXfpnx7OaLfX7+vdupV6lsfFz9fPO32jTE3Ftnv/LeTxaP9/vtFjfv+yjC6pZPVzqoOmXJnytCrJ3ucnOS87se6JKvs7wXrTsyHh9FCAjAtr5WNAKpSadYf/R0+Dq/INluk/tYaFAAeakwIHKZVpd3l2ns2Cvh/Pk0MMInQFfBCWQEUJ2gsF4BMf5pvqBw9esAEWaw9GS6365wKAi12CUhocAMZLb5IBRsKKgzEghotGaAnRMFiAzb6k0YoOiDYJAACS3tAwpwzIGPpFlLBPgYV9j6DGstk0FMlbNY04F83fU5/ZB4K0BZDN26ZolR7pTD9CSVfZ5QWBLg3JFdxQ1R4ZD58QRNpigkDAmk90BOhM1kG5IPDUNct6EuWitybd/U8exMR0bnqSfN2y0iUyIFAGB6IAGgjBnSDY2EimuYepcL3P4FI+OgwqKGuQ/4GQrgo7YMo4SI7IC9Ss1PdrTwygACJtYF4iIDOEBYGIB/oEF0ELEDf6l4qCMdjrusAn81GBGrUuat0vrzceL8tgB4+VhaSkIWCpqM1VkxVCfK6MZPLSiIB') format('woff2'),
  url('../font/iconfont.woff?t=1591849603771') format('woff'),
  url('../font/iconfont.ttf?t=1591849603771') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../font/iconfont.svg?t=1591849603771#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dayinji:before {
  content: "\e645";
}

.icon-dianchi:before {
  content: "\e646";
}

需要修改url中圖標文件的路徑

五.HtmlWebpackPlugin

1.安裝

npm install --save-dev html-webpack-plugin

2.webpack.config.js配置：

const HtmlWebpackPlugin=require("html-webpack-plugin");
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
 plugins: [new HtmlWebpackPlugin({
 	template: './src/template/index.html'
 }), new CleanWebpackPlugin(),  ],

注意clenWebpackPlugin需要加括號，是一個命名導出，說明這個clean-webpack-plugin文件導出了多個函數、類、變量等

3.使用

首先創建模板文件，比如我的在src\template\index,前面加上./表示是相對於webpack.config.js文件所在的路徑，如下

模板文件index.html如下：

<!DOCTYPE html>
<html>
<head>
	<title>模板文件</title>
	<meta charset="utf-8">

</head>
<body>
<div id="root"></div>
</body>
</html>

然後，HtmlWebpackPlugin會幫助我們將index文件打包到dist目錄下（dist是我們設置的輸出目錄），並自動引入.js文件

CleanWebpackPlugin會幫助我們刪除dist目錄下的所有文件，執行順序從下到上，因此是先刪除，再利用模板生成文件

命令需要使用npx webpack，否則dist目錄下的文件會裝入內存中，裏面是空的

文檔：https://www.webpackjs.com/plugins/html-webpack-plugin/

六.entry和output

1.webpack.config.js配置：

entry: "./src/index.js",
//入口文件
output: {
	//publicPath:'/',
	filename: "main.js",
	//輸出文件名
	path: path.resolve(__dirname, "dist"),
	//輸出路徑
},

entry：項目的起始文件，也就是入口

filename:打包後的文件名，所有js文件打包到一個main文件中

path:打包文件的路徑

publicPath:如下

文檔：https://www.webpackjs.com/configuration/output/

七.source map

1.webpack.config.js配置

 devtool:'source-map',

其它設置選項

js源碼經過轉換後生成新的代碼，如打包壓縮合成一個main.js文件，減少文件的數量和文件的大小，如babel轉換ES6語法能讓低版本瀏覽器使用，轉換後的代碼，加大了查錯的難度，因此需要一個，從打包後的文件到打包前的一個映射。

2.使用

首先需要開啓谷歌瀏覽的source map的功能

使用效果如下：

文檔：https://webpack.js.org/configuration/devtool/#root

八.使用 webpack-dev-server

1.安裝

npm install --save-dev webpack-dev-server

2.webpack.config.js配置

 devServer:{
    	contentBase: "./dist",
    	open:true,
    	port:8081,
    	
    }

3.使用

修改package.json中的scripts屬性:

 "scripts": {
   "start": "webpack-dev-server",
  }

然後運行下面的命令來啓動服務器。

npm run start

webpack-dev-server幫助我們啓動了一個以port:8081的web服務器，當我們的contentBase屬性值，也就是dist目錄下的所有內容被修改了，會幫助我們重新編譯js文件，且刷新頁面，達到頁面隨着源文件實時變化的目的。

當然也可以使用

"scripts": {
    "watch": "webpack --watch",
}

webpack --watch只會幫助我們編譯文件，而不會自動刷新頁面

文檔：https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server

九.模塊熱替換

1.webpack.config.js配置

  devServer:{
    	contentBase: "./dist",
    	open:true,
    	port:8081,
    	hot:true,
    	hotOnly:true,
    }

同時還需要使用HotModuleReplacementPlugin

const webpack=require('webpack');
 plugins:[new HtmlWebpackPlugin(
    	{
    		template:'./src/template/index.html'
    	}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
    ],

2.使用

index.js文件：

if (module.hot) {
	module.hot.accept('./Page.js', () = >

	{
		let page = new Page();
		page.appendChild('header2');
	});


}

Page.js文件：

export default  function Page(){

	this.header=document.createElement('div');
    this.dom=document.getElementById("root");
	//this.dom=document.getElementsByTagName("body")[0];

	
}
Page.prototype.appendChild=function(value){
	
	this.header.innerText=value+2 ;
	this.dom.appendChild(this.header);

}

module.hot.accept監聽第一個參數對應的文件是否修改，如果是，執行第二個參數裏的匿名函數

文檔：https://webpack.js.org/configuration/dev-server/#devserverhot

十.Babel

1.安裝

npm install --save-dev babel-loader @babel/core

npm install @babel/preset-env --save-dev

npm install --save @babel/polyfill

2.webpack.config.js配置

     {
     	test: /\.js$/,
     	exclude: /node_modules/,
     	loader: "babel-loader",
     	options: {
     			  "presets": [["@babel/preset-env",
     		{ useBuiltIns:"usage"//表示只用babel轉化業務代碼ES6語法
     		}
     			  ]

     			  ],
     		// "plugins": [
     		// 	["@babel/plugin-transform-runtime",
     		// 	{
     		// 		"absoluteRuntime": false,
     		// 		"corejs": 2,
     		// 		//默認false
     		// 		"helpers": true,
     		// 		"regenerator": true,
     		// 		"useESModules": false,
     		// 		"version": "7.0.0-beta.0"
     		// 	}]
     		// ]
     	}
     },

3.在index.js中使用

import "@babel/polyfill";//在最上面引入

還有一種方式是使用plugin-transform-runtime

1.安裝

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

2.webpack.config.js配置

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

3.使用

index.js中註釋掉 import "@babel/polyfill";

也就是說，當引入第三方庫的時候，使用 plugin-transform-runtime

文檔：https://babel.docschina.org/docs/en/usage

https://babel.docschina.org/setup#installation

https://babel.docschina.org/docs/en/babel-plugin-transform-runtime

另外使用babel打包react,也就是翻譯jsx語法

1.安裝

npm install --save-dev @babel/preset-react

2.webpack.config.js配置

{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: "babel-loader",
	options: {
		"presets": [
			["@babel/preset-env",
			{
				useBuiltIns: "usage" //表示只用babel轉化業務代碼ES6語法
			},

			], "@babel/preset-react",

			],
		// "plugins": [
		//    [
		//      "@babel/plugin-transform-runtime",
		//      {
		//        "absoluteRuntime": false,
		//        "corejs": 2,//默認false
		//        "helpers": true,
		//        "regenerator": true,
		//        "useESModules": false,
		//        "version": "7.0.0-beta.0"
		//      }
		//    ]
		//  ]
	}
}, }

(可以把module.rules中的相關配置項放入babelrc.js文件中

文檔：https://babel.docschina.org/docs/en/babel-preset-react