webpack學習

時間 2019-11-20

標籤 webpack 學習简体版

原文原文鏈接

學習webpack 4.0 https://webpack.docschina.org/concepts/javascript

一個最簡單的打包的代碼。https://github.com/ronami/minipackcss

itstrive的代碼 https://github.com/itstrivehtml

#### npm start前端

1. -D 和-S的區別和聯繫。vue

2java

3node

webpack1.x
----------------------------------
webpack2.x
----------------------------------
webpack3.x
----------------------------------
webpack4.x
---------------------------------

官網: https://webpack.js.org/

---------------------------------
靜態開發(H5+C3)	gulp
vue\react  ->  webpack
DEMO  -> webpack 轉
---------------------------------
webpack是什麼?
	打包工具(模塊打包器)
	前端工程師，必不可少工具
	webpack4.x
webpack做用:
1. 打包  (把多個文件打包成一個js文件， 較少服務器壓力、帶寬)
2. 轉化  (好比less、sass、ts)   須要loader
3. 優化  (SPA愈來愈盛行，前端項目複雜度高， webpack能夠對項目進行優化)
---------------------------------
webpack構成:
1. 入口   entry
2. 出口	output
3. loaders  轉化器
4. plugins  插件
5. devServer 開發服務器
6. mode   
------------------------------------------------------------------
先必須確保node環境已經安裝
	nodejs.org  -> download -> 下一步
------------------------------------------------------------------
安裝webpack:
	npm install webpack-cli -g

	OR

	yarn add webpack-cli -g

	驗證webpack環境已經ok?
		webpack -v
------------------------------------------------------------------
package.json  項目主要依賴配置文件

	npm init -y

------------------------------------------------------------------
開發環境: (develepment)
	就是你平時編寫代碼的環境

	npm i jquery --save-dev
	npm i jquery -D
生產環境: (production)
	項目開發完畢，部署上線
	
	npm i jquery --save
	npm i jquery -S
--------------------------------------------------------------------

npm i jquery
npm un jquery


npm i jquery --save-dev
npm i jquery --save

npm i jquery --save-dev jquery
--------------------------------------------------------------------

npm i jquery loadsh aaa bbb ccc -D

--------------------------------------------------------------------
cnpm如何配置:
	npm install -g cnpm --registry=https://registry.npm.taobao.org

--------------------------------------------------------------------
跑一跑webpack:
	終端裏運行:
		webpack src\index.js --output dist/bundle.js
--------------------------------------------------------------------
webpack.config.js    webpack配置文件

	預覽:

		module.exports={
			//入口配置
			entry:{},
			//出口配置
			output:{},
			//module.rules
			//loaders
			module:{},
			//插件
			plugins:[],
			//開發服務器
			devServer:{}
		};
--------------------------------------------------------------------
module.exports={
    //入口配置
    entry:{
        a:'./src/index.js'
    },
    //出口配置
    output:{
        path:__dirname+'/dist', //path必須是絕對路徑
        filename:'bundle.js'
    }
};
--------------------------------------------------------------------
const path = require('path'); //node系統模塊
module.exports={
    //入口配置
    entry:{
        a:'./src/index.js'
    },
    //出口配置
    output:{
        path:path.resolve(__dirname,'dist'), //path必須是絕對路徑
        filename:'bundle.js'
    }
};
--------------------------------------------------------------------
配置文件名字必定得叫 webpack.config.js  答: 不是

若是更名叫:  mmr.config.js

	運行時候:

	webpack --config mmr.config.js
--------------------------------------------------------------------
npm run dev
npm run build

npm scripts:

	package.json:

		"scripts": {
		    	"build": "webpack --config mmr.config.js",
			"dev":"xxx",
			"aaa":"xxx"
		  }
--------------------------------------------------------------------
parcel   零配置
--------------------------------------------------------------------
webpack4.x 實現所謂的0配置:
	
--------------------------------------------------------------------
mode:

	webpack --mode development
		
	webpack --mode production 
		明顯文件被壓縮

--------------------------------------------------------------------

多入口(多文件)打包一塊兒:
	const path = require('path');
	module.exports = {
		entry:['./src/index.js','./src/index2.js'],  //按照順一塊兒打包 bundle.js
		output:{
			path:path.resolve(__dirname, 'dist'),
			filename:'bundle.js'
		}
	};
--------------------------------------------------------------------
多入口多出口配置:
	const path = require('path');
	module.exports = {
		entry:{
			index:'./src/index.js',
			index2:'./src/index2.js'
		},
		output:{
			path:path.resolve(__dirname, 'dist'),
			filename:'[name].bundle.js'
		}
	};
--------------------------------------------------------------------
npm i webpack-cli -g
--------------------------------------------------------------------

html-webpack-plugin:
	* 注意: 依賴webpack、webpack-cli
	生成頁面

	1. 安裝
		npm i html-webpack-plugin -D
	2. 引入
		const HtmlWebpackPlugin = require('html-webpack-plugin');
	3. 使用
		plugins:[
			new HtmlWebpackPlugin()
		]
	----------------------------------------------------
	html-webpack-plugin:
		模板:
			new HtmlWebpackPlugin({
				template:'模板地址'
			})
		頁面標題:
			new HtmlWebpackPlugin({
				title:'xxxxx',
				template:'模板地址'
			})

			必定記得在模板中使用:
		生成鏈接消除緩存:
			new HtmlWebpackPlugin({
				hash:true,
				title:'xxxxx',
				template:'模板地址'
			})
		壓縮輸出:
			new HtmlWebpackPlugin({
				minify:{
					collapseWhitespace:true,  //壓縮空白
					removeAttributeQuotes:true //刪除屬性雙引號
				},
				hash:true,
				title:'I Love China',
				template:'./src/index.html'
			})
		生成多個頁面:
			filename:'xxx'
		多頁面分別引入本身的js:
			chunks:['index']

	https://www.npmjs.com/package/html-webpack-plugin#
--------------------------------------------------------------------
clean-webpack-plugin:	刪除某些東西(清除)
	1. 下載
		cnpm i clean-webpack-plugin -D
	2. 引入
		const CleanWebpackPlugin = require('clean-webpack-plugin');
	3. 使用:
		new CleanWebpackPlugin(['dist'])
--------------------------------------------------------------------
devServer:
	1. 下載
		cnpm i webpack-dev-server -D
	2. 使用
		devServer:{
		        //設置服務器訪問的基本目錄
		        contentBase:path.resolve(__dirname, 'dist'),
		        //服務器ip地址， localhost
		        host:'localhost',
		        //設置端口
		        port:8090
		    }

	此時  pakcage.json:
		"scripts": {
			"build": "webpack --mode development",
			"dev":"webpack-dev-server --mode development"
		}

	想自動打開瀏覽器:
		open:true

	熱更新:
		hot:true

		開啓:
			new webpack.HotModuleReplacementPlugin()

	https://webpack.js.org/configuration/dev-server/

--------------------------------------------------------------------
loaders:  在webpack裏面是一個很重要功能
	加載器、轉化器
	好比: less/scss 轉成css
	        ES7 8
	        jsx
--------------------------------------------------------------------
處理css文件:
	style-loader
	css-loader

		cnpm i style-loader css-loader -D

	配置:
		module:{
			rules:[
				{
					test:/\.css$/,
					use:['style-loader','css-loader']
				}
			]
		}

	關於loader寫法:
		1. use:['xxx-loader','xxx-loader']
		2. loader:['xxx-loader','xxx-loader']
		3. use:[
	                    {loader:'style-loader'},
	                    {loader:'css-loader'}
	                ]
--------------------------------------------------------------------
打包完之後確定須要壓縮上線:
	如何壓縮:
	1. webpack4.x
		--mode production
	2. 以前版本
		uglifyjs-webpack-plugin

		a). cnpm i uglifyjs-webpack-plugin -D
		b). const uglify = require('xxx);
		c). new ugliufy()
--------------------------------------------------------------------		
圖片: (png,jpg,gif)
	url-loader
	file-loader

	1. cnpm i file-loader url-loader -D
	2. 配置
		{
	                test:/\.(png|jpg|gif)$/,
	                use:[{
	                    loader:'url-loader',
	                    options:{
	                          limit:50，
			 outputPath:'images'
	                    }
	                }]
	            }
--------------------------------------------------------------------
分離:  css
	extract-text-webpack-plugin

	1. cnpm i extract-text-webpack-plugin -D		webpack3.x
	
		cnpm i extract-text-webpack-plugin@next -D	webpack4.x
	2. 在plugins裏面應用
		new ExtractTextPlugin(提取出去的路徑)

		use:ExtractTextPlugin.extract({
		    fallback:'style-loader',
		    use:'css-loader',
		    publicPath:'../' //解決css背景圖，路徑問題
		})
	3. 碰見一些小事
--------------------------------------------------------------------		
mini-css-extract-plugin:   截止到目前爲止(2018-3-23)，對背景圖路徑配置
	API文檔

	new MiniCssExtractPlugin({
	    filename:'css/index.css'
	})
--------------------------------------------------------------------
less:
	1. cnpm i less less-loader -D
	2. {
		test:/\.less$/,
		use:['style-loader','css-loader','less-loader']
	}


分離less:
	{
                test:/\.less$/,
                //use:['style-loader','css-loader','less-loader']
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','less-loader']
                })
            }
--------------------------------------------------------------------
sass:
	cnpm i node-sass sass-loader -D

	配置:
	{
                test:/\.(sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }

提取sass:
	{
                test:/\.(sass|scss)$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader']
                })
            }
--------------------------------------------------------------------		
transform:

-webkit-transform:

自動處理前綴:

	postCss	預處理器

	專門處理css平臺

1. cnpm i postcss-loader
	autoprefixer -D

2. 準備 postcss.config.js   配置postCss
	module.exports ={
		plugins:[
			require('autoprefixer')
		]
	};
3. 配置loader
	use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'},
                    {loader:'postcss-loader'}
                ]
4. 提取出來
	use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','postcss-loader'],
                    publicPath:'../' //解決css背景圖，路徑問題
                })
--------------------------------------------------------------------
消除冗餘css代碼:
	Purifycss

	1. 下載

		cnpm i purifycss-webpack purify-css -D
	2. 引入插件
		const PurifyCssWebpack = rewquire('purifycss-webpack');
	3. 須要引入一個額外包
		glob
		cnpm i glob -D
	4. 在plugins裏面配置
		new PurifyCssWebpack({
		            paths:glob.sync(path.join(__dirname, 'src/*.html'))
		        })
---------------------------------------------
調試:
	webpack4.x 開啓調試:
		--mode development

	webpack3.x以前:
		sourceMap

		devtool:'source-map',

---------------------------------------------
babel:
	- babel用來編譯js
	- 讓你很輕鬆的使用 ESnext,轉化
	- jsx

babel-core	bable-loader    babel-preset-env

	1. 下載
		cnpm i babel-loader babel-core babel-preset-env -D
	2. 配置
		{
	                test:/\.(js|jsx)$/,
	                use:['babel-loader'],
	                exclude:/node_modules/
	            }

	ESnext全部語法
---------------------------------------------
jsx:
	cnpm i babel-preset-react -D
	cnpm i react react-dom -D
---------------------------------------------
在webpack中用模塊化:
	和node如出一轍

	導出:
		module.exports = xxx
	引入:
		require('./xxxxx');
---------------------------------------------
在webpack中使用json:
	json-loader

	到webpack.3x版本以後不用，json能夠默認就識別

	const json = require('./xxx.json')
---------------------------------------------
靜態資源輸出:
	copy-webpack-plugin

	1. 下載
		cnpm i copy-webpack-plugin -D
	2. 引入
		const CopyWebpackPlugin = require('copy-webpack-plugin');
	3. 使用
		plugins:[
			new CopyWebpackPlugin([{
				from:path.resolve(__dirname, 'src/assets'),
				to:'./public'
			}])
		]
---------------------------------------------	
https://webpack.js.org/plugins/copy-webpack-plugin/

都在npm上:
	

	github  issues
---------------------------------------------
使用第三庫:
	1. 直接npm下載，而後引入（徹底可使用，可是我我的不是很推薦）
		cnpm i jquery -S
		
		import $ from 'jquery'

		$(xxxx).on()
		$(xxx).css()
	2. ProvidePlugin	(我的推薦此方式)
		const webpack = require('webpack');

		在plugins裏面使用:
		
			new webpack.ProvidePlugin({
				$:'jquery',
				lodash:'lodash'
				....
			})

	經過ProvidePlugin和 import直接引入區別:
		1. import $...，引入以後，不管你在代碼中是否使用jquery，打包後，都會打進去，這樣其實產生大量的冗餘js
		2. Provideplugin, 只有你在使用到此庫，纔會打包
--------------------------------------------------------
提取第三方(本身感受想提取)js庫:
	以前webpack3.x版本以前:
		
		new webpack.optimize.CommonsChunkPlugin({
		    name:'jquery'
		})

	到了webpack4.x版本:
		optimization.splitChunks

		optimization:{
			splitChunks:{
				cacheGroups:{
					vendor:{
					    chunks:'initial',
					    name:'jquery',
					    enforce:true
					}
				}
			}
		}
		----------------------------------------------
		optimization:{
			splitChunks:{
				cacheGroups:{
					aaa:{
					    chunks:'initial',
					    name:'jquery',
					    enforce:true
					},
					bbb:{
					    chunks:'initial',
					    name:'入口名稱',
					    enforce:true
					}
				}
			}
		}
--------------------------------------------------------
http://mmr.ke.qq.com

官方QQ羣: 651661013

===米斯特吳的教學視頻。react

#### Webpack 中 file-loader 和 url-loader 的區別jquery

 url-loader和file-loader是什麼關係呢？
簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。
經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：
1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL；
2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。所以咱們只須要安裝url-loader便可。

#### babel注入的三種方式。webpack

（1）命令行直接使用babel aa.js(前提是你的.babelrx記性了配置)

(2) 在webpack main.js中 entry中率先注入。

（3）在main.js中引用。

http://www.javashuo.com/article/p-hzxcnfoi-gs.html

https://www.jianshu.com/p/0dc3bddb6da8

##### webpack尋找配置文件。

webpack --config=config/webpack.dev.js

#### overlay:true

命令行和html頁面的console一塊兒報錯。

#### transform-runtime

這個能夠避免promise編譯的時候的污染。