干啥的
分析你的項(xiàng)目結(jié)構(gòu)嗓节，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss荧缘，TypeScript等），并將其打包為合適的格式以供瀏覽器使用拦宣。
工作方式
把你的項(xiàng)目當(dāng)做一個(gè)整體截粗，通過(guò)一個(gè)給定的主文件（如：index.js）丐巫，Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴文件捅伤，使用loaders處理它們缤骨，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件罕模。
Webpack工作原理
使用
-
安裝
//將webpack安裝到你的項(xiàng)目目錄
npm install --save-dev webpack
-
寫(xiě)配置文件
在終端中使用npm init命令可以自動(dòng)創(chuàng)建一個(gè)package.json文件
-
創(chuàng)建目錄
在主文件夾里創(chuàng)建兩個(gè)文件夾,page文件夾和public文件夾联喘，src文件夾用來(lái)存放原始數(shù)據(jù)和我們將寫(xiě)的JavaScript模塊剖效，page文件夾用來(lái)存放準(zhǔn)備給瀏覽器讀取的數(shù)據(jù)（包括使用webpack生成的打包后的js文件以及一個(gè)index.html文件）远寸。在這里還需要?jiǎng)?chuàng)建三個(gè)文件覆糟，index.html 文件放在page文件夾中外驱，兩個(gè)js文件（index.js和main.js）放在page文件夾中育灸，此時(shí)項(xiàng)目結(jié)構(gòu)如下圖所示
index.html文件只有最基礎(chǔ)的html代碼腻窒，它唯一的目的就是加載打包后的js文件（bundle.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>insBaby</title>
</head>
<body>
<div id='page'>
</div>
<script src="bundle.js"></script>
</body>
</html>
index.js只包括一個(gè)用來(lái)返回包含問(wèn)候信息的html元素的函數(shù)。
// index.js
module.exports = function() {
var app = document.createElement('div');
app.textContent = "可以啊";
return app;
};
main.js用來(lái)把index模塊返回的節(jié)點(diǎn)插入頁(yè)面磅崭。
//main.js
var index = require('./index.js');
document.getElementById('page').appendChild(index());
運(yùn)行
一儿子、命令行
//webpack {entry file/入口文件} {bundled file/存放bundle.js的地方}
webpack src/main.js page/bundle.js
二、通過(guò)配置文件來(lái)使用Webpack
Webpack擁有很多功能砸喻，這些功能其實(shí)都可以通過(guò)命令行模式實(shí)現(xiàn)柔逼，這樣不太方便且容易出錯(cuò)的，一個(gè)更好的辦法是定義一個(gè)配置文件恩够，這個(gè)配置文件其實(shí)也是一個(gè)簡(jiǎn)單的JavaScript模塊卒落，可以把所有的與構(gòu)建相關(guān)的信息放在里面。
在當(dāng)前文件夾的根目錄下新建一個(gè)名為webpack.config.js的文件
//“__dirname”是node.js中的一個(gè)全局變量蜂桶，它指向當(dāng)前執(zhí)行腳本所在的目錄儡毕。
var path = require("path");
module.exports = {
entry: {
app: ["./src/main.js"]//已多次提及的唯一入口文件
},
output: {
path: path.resolve(__dirname, "page"),
publicPath: "/page/",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
},
}
現(xiàn)在如果你需要打包文件只需要在終端里你運(yùn)行webpack命令就可以了，這條命令會(huì)自動(dòng)參考webpack.config.js文件中的配置選項(xiàng)打包你的項(xiàng)目
三扑媚、更快捷的執(zhí)行打包任務(wù)
npm可以引導(dǎo)任務(wù)執(zhí)行腰湾，對(duì)其進(jìn)行配置后可以使用簡(jiǎn)單的npm start命令來(lái)代替這些繁瑣的命令。在package.json中對(duì)npm的腳本部分進(jìn)行相關(guān)設(shè)置即可疆股，設(shè)置方法如下费坊。
{
"name": "insbaby",
"version": "1.0.0",
"description": "就是框架再搭建一遍，不告訴你為了啥旬痹，咋地",
"main": "index.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"start": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/daisymark/insBaby.git"
},
"keywords": [
"gaojing&hongling"
],
"author": "gaojing",
"license": "ISC",
"bugs": {
"url": "https://github.com/daisymark/insBaby/issues"
},
"homepage": "https://github.com/daisymark/insBaby#readme"
}
讓你的瀏覽器監(jiān)聽(tīng)你的修改
Webpack提供一個(gè)可選的本地開(kāi)發(fā)服務(wù)器附井，這個(gè)本地服務(wù)器基于node.js構(gòu)建，可以實(shí)現(xiàn)你讓你的瀏覽器監(jiān)測(cè)你的代碼的修改两残，并自動(dòng)刷新修改后的結(jié)果永毅，不過(guò)它是一個(gè)單獨(dú)的組件，在webpack中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴
npm install --save-dev webpack-dev-server
devserver配置選項(xiàng)有很多
這里是官網(wǎng)地址：(找不到中文配置文件,學(xué)習(xí)英文多么重要...)
https://webpack.js.org/configuration/dev-server/#devserver
修改webpack.config.js文件
//“__dirname”是node.js中的一個(gè)全局變量人弓，它指向當(dāng)前執(zhí)行腳本所在的目錄沼死。
var path = require("path");
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項(xiàng)
entry: {
app: ["./src/main.js"]//唯一入口文件
},
output: {
path: path.resolve(__dirname, "page"),
filename: "bundle.js"http://打包后輸出文件的文件名
},
devServer: {
contentBase: path.join(__dirname, "page"),
compress: true,
port: 9000,
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實(shí)時(shí)刷新
}
};
修改package.json
{
"name": "insbaby",
"version": "1.0.0",
"description": "就是框架再搭建一遍崔赌，不告訴你為了啥意蛀，咋地",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "webpack-dev-server --progress"
},
"repository": {
"type": "git",
"url": "git+https://github.com/daisymark/insBaby.git"
},
"keywords": [
"gaojing&hongling"
],
"author": "gaojing",
"license": "ISC",
"bugs": {
"url": "https://github.com/daisymark/insBaby/issues"
},
"homepage": "https://github.com/daisymark/insBaby#readme"
}
下面說(shuō)說(shuō)webpack處理不同格式文件的功能
一、Loaders
通過(guò)使用不同的loader健芭，webpack通過(guò)調(diào)用外部的腳本或工具可以對(duì)各種各樣的格式的文件進(jìn)行處理县钥，比如說(shuō)分析JSON文件并把它轉(zhuǎn)換為JavaScript文件，或者說(shuō)把下一代的JS文件（ES6慈迈，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器可以識(shí)別的JS文件若贮。或者說(shuō)對(duì)React的開(kāi)發(fā)而言，合適的Loaders可以把React的JSX文件轉(zhuǎn)換為JS文件兜看。
1>轉(zhuǎn)換JSON的loaders
//安裝可以裝換JSON的loader
npm install --save-dev json-loader
//webpack.config.js
//“__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄狭瞎。
var path = require("path");
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps细移，選擇合適的選項(xiàng)
entry: {
app: ["./src/main.js"]//唯一入口文件
},
output: {
path: path.resolve(__dirname, "page"),
filename: "bundle.js"http://打包后輸出文件的文件名
},
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
}
]
},
devServer: {
contentBase: path.join(__dirname, "page"),
compress: true,
port: 9000,
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實(shí)時(shí)刷新
}
};
修改package.json 其他的都一樣
"scripts": {
"start": "webpack-dev-server --module-bind 'json=json-loader' --progress"
},
除了json-loader還有很多其他的~~
https://webpack.js.org/loaders/
2>轉(zhuǎn)換css的loader
webpack提供兩個(gè)工具處理樣式表，css-loader 和 style-loader熊锭，二者處理的任務(wù)不同弧轧，css-loader使你能夠使用類似@import 和 url(...)的方法實(shí)現(xiàn) require()的功能,style-loader將所有的計(jì)算后的樣式加入頁(yè)面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中碗殷。
//安裝
npm install --save-dev style-loader css-loader
寫(xiě)到這兒精绎，其實(shí)意思大概大家都能明白，市面上教程很多锌妻，最后發(fā)現(xiàn)還是只能看官方文檔:
http://webpack.github.io/docs/usage.html
