webpack基本用法-創(chuàng)新互聯(lián)

一、webpack的基本概念

webpack是一個(gè)用于現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包工具；webpack會(huì)在內(nèi)部從一個(gè)或多個(gè)入口構(gòu)建一個(gè)依賴圖（dependency graph），在項(xiàng)目中所需的每一個(gè)模塊合成以后或多個(gè)bundles；bundles均為靜態(tài)資源用于展示內(nèi)容
依賴圖：每當(dāng)一個(gè)文件依賴另一個(gè)文件時(shí)，webpack都會(huì)將文件視為直接存在依賴關(guān)系，這使得webpack可以獲得非代碼資源（圖片、web字體），并將它們作為依賴提供給應(yīng)用程序

創(chuàng)新互聯(lián)公司企業(yè)建站,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。二、 webpack的配置 1、入口entry

指示webpack使用哪個(gè)模塊來(lái)作為構(gòu)建依賴圖的開(kāi)始；進(jìn)入入口起點(diǎn)后webpack會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)依賴的（直接或間接）
默認(rèn)值：./src/index.js
在webpack.config.js文檔中指定入口：

用法1：entry: string | [string]

缺點(diǎn)：擴(kuò)展或調(diào)整配置的靈活性不大；“webpack 配置的可擴(kuò)展” 是指，這些配置可以重復(fù)使用，并且可以與其他配置組合使用

//單個(gè)入口
module.exports = {entry: './src/file.js' 
}
 //多個(gè)入口,將一個(gè)文件路徑數(shù)組傳遞給 entry 屬性
module.exports = {entry: ['./src/file.js','./src/file2.js']
}

用法2：對(duì)象語(yǔ)法entry: {string | [string] } | {}

module.exports = {entry: {app: './src/app.js',
		adminApp: './src/adminApp.js'
	}
}

描述入口對(duì)象的屬性：

dependOn：當(dāng)前入口所依賴的入口；它們必須在該入口被加載前加載
filename：指定要輸出的文件名稱
import：?jiǎn)?dòng)時(shí)需加載的模塊
library：為當(dāng)前 entry 構(gòu)建一個(gè) library
runtime：運(yùn)行時(shí) chunk 的名字；設(shè)為 false 可以避免一個(gè)新的運(yùn)行時(shí) chunk
publicPath：當(dāng)該入口的輸出文件在瀏覽器中被引用時(shí)，為它們指定一個(gè)公共 URL 地址

module.exports = {entry: {a2: 'dependingfile.js',
    b2: {  dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

Tips：通過(guò)插件生成入口時(shí)，可以傳遞空對(duì)象 {} 給 entry 2、出口output

通過(guò)配置output選項(xiàng)，告知webpack如何向硬盤寫(xiě)入編譯文件；
note：可以存在多個(gè)entry起點(diǎn)，但只能指定一個(gè)output配置
用法：設(shè)置為一個(gè)對(duì)象，配置filename

module.exports = {output: {filename: 'bundle.js',
    path: __dirname + '/dist'
  },
};

多個(gè)入口時(shí)，使用占位符來(lái)確保每個(gè)文件具有唯一的名稱

module.exports = {mode: 'development', //告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化 production | none(默認(rèn)值)
	entry: {app: './src/app.js',
	    search: './src/search.js',
	  },
	 output: { filename: '[name].js',
		  path: __dirname + '/dist',
	 },
};
// 寫(xiě)入到硬盤：./dist/app.js, ./dist/search.js

3、loader

loader用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換；loader可以使你在import或者load模塊時(shí)預(yù)處理文件。loader可以將文件從不同的語(yǔ)言（如TS）轉(zhuǎn)換成JavaScript語(yǔ)法或者將內(nèi)聯(lián)圖像轉(zhuǎn)換成dataURL；loader允許在JavaScript模塊中import CSS文件

loader特性

loader支持鏈?zhǔn)秸{(diào)用：鏈中的每個(gè) loader 會(huì)將轉(zhuǎn)換應(yīng)用在已處理過(guò)的資源上；一組鏈?zhǔn)降?loader 將按照相反的順序執(zhí)行。鏈中的第一個(gè) loader 將其結(jié)果（也就是應(yīng)用過(guò)轉(zhuǎn)換后的資源）傳遞給下一個(gè) loader；鏈中的最后一個(gè) loader，返回 webpack 所期望的 JavaScript
loader 可以是同步的，也可以是異步的
loader 運(yùn)行在 Node.js 中，并且能夠執(zhí)行任何操作

解析loader

loader 遵循標(biāo)準(zhǔn) 模塊解析規(guī)則。多數(shù)情況下，loader 將從模塊路徑加載（通常是從 npm install, node_modules 進(jìn)行加載）

（1）css-loader：告訴 webpack 加載 CSS 文件

css-loader 負(fù)責(zé)解析 CSS 代碼，主要是為了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明。
style-loader 會(huì)將 css-loader 解析的結(jié)果轉(zhuǎn)變成 JS 代碼，運(yùn)行時(shí)動(dòng)態(tài)插入 style 標(biāo)簽來(lái)讓 CSS 代碼生效。

//先安裝相關(guān)的loader
npm install --save-dev css-loader style-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
			{		test: /\.css$/,
				use: ['style-loader','css-loader'],
				exclude: /node_module/,   // 過(guò)濾，排除node_module目錄下的文件
				include: /demo/   // 指定匹配文件的范圍　　　　　
			}
		]
	}
}

（2）less-loader：告訴 webpack 加載 less 文件

//先安裝相關(guān)的loader
npm install --save-dev css-loader style-loader less-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
			{		test: /\.less$/,
				use: ['style-loader','css-loader','less-loader']
			}
		]
	}
}

（3）ts-loader：將 TypeScript 轉(zhuǎn)為 JavaScript

//先安裝相關(guān)的loader
npm install --save-dev ts-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
			{		test: /\.ts$/,
				use: 'ts-loader'
			}
		]
	}
}

（4）file-loader：處理圖片等資源；把識(shí)別出的資源模塊，移動(dòng)到指定的輸出?目錄，并且返回這個(gè)資源在輸出目錄的地址(字符串)

//先安裝相關(guān)的loader
npm install --save-dev file-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
			{		test: /\.(png|jpe?g|gif)$/,
				use: {loader:'file-loader',
						name:'[name]_[hash].[ext]'  //[ext] 源資源模塊的后綴
						outputPath: "./images",//打包后的存放位置
						publicPath: './images',// 打包后文件的 url
					}
			}
		]
	}
}

（5）url-loader：可以處理file-loader能處理的所有資源；遇到圖片格式的模塊，可以選擇性的把圖片轉(zhuǎn)成base64格式的字符串，并打包到 js 中，對(duì)小體積的圖片比較合適，大圖片不合適

url-loader封裝了file-loader
文件大小小于limit參數(shù)時(shí)，url-loader將會(huì)把文件轉(zhuǎn)為DataURL。
文件大小大于limit，url-loader會(huì)調(diào)用file-loader進(jìn)行處理

//先安裝相關(guān)的loader
npm install --save-dev url-loader
//webpack.config.js中配置
module.exports = {module:{rules:[
			{		test: /\.(png|jpe?g|gif)$/,
				use: {loader:'url-loader',
						name:'[name]_[hash].[ext]'  //[ext] 源資源模塊的后綴
						outputPath: "./images",//打包后的存放位置
						publicPath: './images',// 打包后文件的 url
						limit: 1024 * 30, //30KB以下的文件采用url-loader base64 格式
                    	fallback: 'file-loader', //默認(rèn)值是file-loader
					}
			}
		]
	}
}

（6）babel-loader：（核心）解析es6，將es6轉(zhuǎn)化成es5，將react的jsx語(yǔ)法轉(zhuǎn)化成瀏覽器可以認(rèn)識(shí)的語(yǔ)言

Webpack 自帶加載 js模塊的功能，但是只能做 js模塊化的打包，并不能轉(zhuǎn)換 js 里面的代碼，比如將 ES6 轉(zhuǎn)換成 ES5；寫(xiě)代碼時(shí)需要轉(zhuǎn)換工具，即babel；babel 和 webpack 的結(jié)合需要一個(gè) babel-loader

babel-loader: 在 webpack 里面利用 babel 解析 ES6 的橋梁；
@babel/core: babel 的核心模塊；
@babel/preset-env: babel預(yù)設(shè)，一組 babel 插件的組合，這樣我們就不用自己安裝插件了

//先安裝相關(guān)的loader和插件
npm install --save-dev babel-loader
npm install --save-dev @babel/plugin-transform-runtime
//webpack.config.js中配置
module.exports = {module:{rules:[
			{		test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {loader:'babel-loader',
						options: {  					presets: ['@babel/preset-env'] // *引入預(yù)設(shè)
         					plugins: [
					            [
					              '@babel/plugin-transform-runtime' // *配置插件信息
					            ]
         					]
        				}
					}
			}
		]
	}
}

4、plugins

loader被用于幫助webpack處理各種模塊，而插件用于執(zhí)行范圍更廣的任務(wù)；
插件是 webpack 的支柱功能。Webpack 自身也是構(gòu)建于你在 webpack 配置中用到的相同的插件系統(tǒng)之上
webpack 插件是一個(gè)具有 apply 方法的 JavaScript 對(duì)象。apply 方法會(huì)被 webpack compiler 調(diào)用，并且在整個(gè)編譯生命周期都可以訪問(wèn) compiler 對(duì)象

（1）html-webpack-plugin

作用：可以生成創(chuàng)建html入口文件，比如單頁(yè)面可以生成一個(gè)html文件入口，配置N個(gè)html-webpack-plugin可以生成N個(gè)頁(yè)面入口；為html文件中引入外部資源，如：script、link

//安裝
npm install --save-dev html-webpack-plugin
//在webpack.config.js中配置
module.exports = {entry:'./src/app.js',,
  	output: {filename: '[name].js',
	    path: __dirname + '/dist',
  	},
	module:{rules:[
			{		test: /\.less$/,
				use: ['style-loader','css-loader','less-loader']
				exclude: /node_modules/,
			}
		]
	}
	plugins: [
		// 單入口寫(xiě)法
		//new HtmlWebpackPlugin({ template: './index.html'})
		//多入口
		new HtmlWebpackPlugin({	template: './index.html',
		  	filename: 'index.html',
		  	chunks: ['index'],
		  	minify: {	  	removeComments: true,// 刪除 index.html 中的注釋
		    	collapseWhitespace: true,// 刪除 index.html 中的空格
			    removeAttributeQuotes: true// 刪除各種 html 標(biāo)簽屬性值的雙引號(hào)
		  	}
		}),
	]
}

（2）webpack-bundle-analyzer 打包文件分析工具

webpack-bundle-analyzer 插件提供了一種對(duì)打包體積文件大小的可視化展示，并支持簡(jiǎn)單的搜索，是當(dāng)我們需要對(duì)打包成果進(jìn)行詳細(xì)控制的時(shí)候非常好用的一個(gè)參考對(duì)象

//安裝
npm install webpack-bundle-analyzer -D
//在webpack.config.js中配置
const {BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {entry:'./src/app.js',,
  	output: {filename: '[name].js',
	    path: __dirname + '/dist',
  	},
	module:{rules:[
			{		test: /\.less$/,
				use: ['style-loader','css-loader','less-loader']
				exclude: /node_modules/,
			}
		]
	}
	plugins: [ 
		new HtmlWebpackPlugin({template: './index.html'}),
		new BundleAnalyzerPlugin()  //打包分析
		]
}

5、webpack-dev-server ：用于快速開(kāi)發(fā)應(yīng)用程序

const path = require('path')
module.exports = {entry:...,
  output:...,
  module:{...}
  devServer: {static: {  directory: path.join(__dirname, 'public'),
    },
    progress: true, //瀏覽器中以百分比顯示編譯進(jìn)度
    port: 9000, //指定監(jiān)聽(tīng)請(qǐng)求的端口號(hào)
    server: 'http', //允許設(shè)置服務(wù)器和配置項(xiàng)（默認(rèn)為 'http'） 'http' | 'https' | 'spdy' string object
    proxy: {  '/api': 'http://localhost:8080',  //使用它來(lái)啟用代理
    },
    compress: true, //啟用 gzip compression
    logging: 'info', //允許在瀏覽器中設(shè)置日志級(jí)別'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'
    allowedHosts:['host.com','host2.com']  
    //'auto' | 'all' [string] 將允許訪問(wèn)開(kāi)發(fā)服務(wù)器的服務(wù)列入白名單 
    //當(dāng)設(shè)置為 'auto' 時(shí)，此配置項(xiàng)總是允許 localhost、 host 和 client.webSocketURL.hostname
  },
};

熱更新

模塊熱更新是webpack的一個(gè)功能，它使得代碼修改后不刷新瀏覽器就可以更新；在應(yīng)用過(guò)程中替換添加刪除模塊，無(wú)需重新加載整個(gè)頁(yè)面，是高級(jí)版的自動(dòng)刷新瀏覽器
優(yōu)點(diǎn)：只更新變更內(nèi)容，節(jié)省開(kāi)發(fā)時(shí)間，調(diào)整樣式更快速，幾乎相當(dāng)于在瀏覽器中更改樣式
實(shí)現(xiàn)：

借助webpack.HotModuleReplacementPlugin()，devServer開(kāi)啟hot
//在webpack.config.js中配置
 { devServer: {progress:true,// 進(jìn)度條
	    port: 9000, //指定監(jiān)聽(tīng)請(qǐng)求的端口號(hào)
	    hotOnly:true,// 頁(yè)面構(gòu)建失敗不刷新頁(yè)面
	    hot: true, // 熱重載
	    open: true, // 自定打開(kāi)瀏覽器
	    proxy:{  '/api':'http:localhost:8080'
	    }
	  }
  }

三、使用webpack搭建react項(xiàng)目

前提：node npm已安裝；控制臺(tái) node -v； npm -v 查看版本
創(chuàng)建項(xiàng)目文件夾初始化

在想要搭建項(xiàng)目的位置建一個(gè)項(xiàng)目根目錄，然后啟動(dòng)控制臺(tái)，并調(diào)到新建的項(xiàng)目的根目錄文件夾下，控制臺(tái)中輸入：npm init -y
回車 -->根目錄中會(huì)出現(xiàn)一個(gè)package.json的文件

安裝依賴包

npm install webpack webpack-cli -D

npm install react react-dom -S

安裝解析ES6和JSX語(yǔ)法的Babel

npm install babel-core babel-loader@7 babel-preset-env babel-preset-react -D

安裝本地啟動(dòng)服務(wù)的webpack-dev-server和解析解析html的插件html-webpack-plugin

npm install webpack-dev-server html-webpack-plugin -D

回車 -->根目錄中會(huì)出現(xiàn)node_modules文件夾；package.json文件中在devDependencies模塊下會(huì)有對(duì)應(yīng)的webpack和webpack-cli及版本
5. 在根目錄下創(chuàng)建src文件夾和index.html文件，并在src文件下新建index.js文件
index.html文件：

這是title

index.js文件：

import React from 'react'
import ReactDom, {render } from 'react-dom'
import App from './app.js'

ReactDom.render(, document.getElementById('root')
)

創(chuàng)建webpack.config.js配置文件

在根目錄下創(chuàng)建一個(gè)webpack.config.js文件，使用到的依賴包使用npm install或者yarn add 安裝

"use strict";
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {mode: "development",  //生產(chǎn)環(huán)境
    target:'web',
    entry:'./src/index.js',
    output:{path: path.resolve(__dirname, './public'),
        filename:'bundle.js'
    },
      // loader
    module:{rules:[
            {test: /\.js|jsx$/,
                // exclude: /node_modules/,
                use:{loader: 'babel-loader',  //目前瀏覽器對(duì)ES6的標(biāo)準(zhǔn)支持不全，所以我們需要把ES6轉(zhuǎn)換成ES5
                    options: {//傳入loader的參數(shù)
                        presets: ["@babel/env", "@babel/react"]
                    }
                }

            },
            {test: /\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {test:/\.(png|svg|jpg|gif)$/,
                use: [{loader: 'url-loader',
                    options: {limit: 1024 * 30, //30KB以下的文件采用url-loader
                        fallback: 'file-loader', //否則采用file-loader，默認(rèn)值是file-loader
                        outputPath: 'images' //圖片輸出路徑,相當(dāng)于output.path
                    }
                }]
            },
            {test: /\.(eot|ttf|woff|svg)$/,
                use: [{loader: "url-loader",
                    options: {limit: 1024 * 30,
                        fallback: 'file-loader',
                        outputPath: 'fonts'
                    }
                }]
            }
        ]
    },
    //  plugin
    plugins:[
        new HtmlWebpackPlugin({//使用html-webpack-plugin 自動(dòng)生成HTML，并引入相應(yīng)文件
            filename: path.join(__dirname,'index.html'),
            template:'index.html',
            inject:'body',
            hash:false,
            minify:{collapseWhitespace: true
            }
        }),
        new webpack.DefinePlugin({// 定義變量
            NODE_ENV: JSON.stringify('dev')
          })
    ],
    devServer: {//progress:true,// 進(jìn)度條
        port: 8080, // 本地服務(wù)器端口號(hào)
        //hotOnly:false,// 頁(yè)面構(gòu)建失敗不刷新頁(yè)面
        hot: true, // 熱重載
        open: true, // 自定打開(kāi)瀏覽器
        proxy:{'/api':'http:localhost:8080'
        }
        }   
}

package.json文件里配置命令

"dev": "webpack-dev-server"
"build": "webpack --config webpack.config.js"

打包、啟動(dòng)項(xiàng)目

打包：npm run build
啟動(dòng)：npm run dev

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

標(biāo)題名稱：webpack基本用法-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article32/djgpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、服務(wù)器托管、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、用戶體驗(yàn)、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容