什么是webpack
本質(zhì)上webpack 是一個JavaScript 靜態(tài)模塊打包器看靠，同時它還能處理非JavaScript模塊盾戴；
利用webpack可以將我們的前端工程代碼打包成適應(yīng)于瀏覽器運行的代碼轧苫；
webpack的基本概念
entry
entry(入口)用來指明webpack進(jìn)行打包的入口文件；
output
output(輸出)用來指明webpack打包后的bundles文件存放的路徑；
loader
webpack自身只理解javascript文件酬蹋，loader可以用來處理那些非javascript文件(或者說是模塊)；
plugins
loader 被用于轉(zhuǎn)換某些類型的模塊抽莱，而插件則可以用于執(zhí)行范圍更廣的任務(wù)范抓，如提取css、添加sourcemap功能食铐、復(fù)制文件等匕垫；
webpack工作流程
了解了webpack作用及基本概念后，我們來看下webpack具體是怎么運用這些概念來進(jìn)行工作的吧虐呻；工作流程如下圖
首先通過執(zhí)行webpack命令來進(jìn)行打包象泵；(一般我們會在package.json中配置類似build的腳本，然后通過 npm build間接執(zhí)行webpack)
接著webpack會讀取webpack.config.js文件進(jìn)行參數(shù)初始化斟叼；
接著通過entry找到入口文件偶惠；
接著調(diào)用匹配到的loader處理入口文件，然后尋找文件的依賴文件繼續(xù)調(diào)用loader處理朗涩；遞歸處理直至所有依賴都被處理完為止洲鸠；
最終將處理完的文件輸出；
這其中webpack會發(fā)出廣播事件馋缅，相應(yīng)的插件會接收廣播事件來對打包過程進(jìn)行額外的處理扒腕；
一個簡單的webpack示例
該demo只是一個最基本的例子，真實項目上配置要比這個復(fù)雜的多
代碼地址：https://github.com/shejiJiang/webpack-demo
以下是示例中webpack.config.js的內(nèi)容萤悴，其中配置了打包的入口瘾腰、輸出的文件名及路徑，同時配置了style-loader覆履、css-loader兩個loader來處理css文件蹋盆；
const path = require('path');
module.exports = {
// 配置入口為./src/index.js文件
entry: './src/index.js',
// 配置輸出文件名费薄、路徑
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 通過module.rules配置loaders
module: {
rules: [
{
// 處理.css文件
test: /\.css$/,
// 使用style-loader、css-loader兩個loader來處理
use: [
'style-loader',
'css-loader'
]
}
]
}
};
package.json文件配置了相應(yīng)的依賴栖雾，以及build腳本
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "node_modules/.bin/webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^3.0.0",
"lodash": "^4.17.11",
"style-loader": "^0.23.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}
index.html直接引用了打包后的js文件
<!doctype html>
<html>
<head>
<title>webpack-demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
demo用法：
yarn
yarn build
瀏覽器直接打開index.html文件
