前言：這兩天在網(wǎng)上找了些視頻和資料學(xué)習(xí)webpack，最后發(fā)現(xiàn)官網(wǎng)上的教程原來(lái)就寫得很好，只是都是全英文的一開(kāi)始不想去看。。。。今天認(rèn)真看了下官網(wǎng)教程，然后總結(jié)下這兩天的對(duì)webpack入門的學(xué)習(xí)，寫一下互相學(xué)習(xí)，英語(yǔ)好的就直接去官網(wǎng)看吧webpack官方入門教程。（話說(shuō)很久沒(méi)學(xué)英語(yǔ)了，學(xué)好英語(yǔ)真的很重要）
1、安裝
打開(kāi)node，敲入命令行
①全局安裝
$ npm install webpack -g
②安裝在項(xiàng)目中，將依賴寫入package.json
$ npm init
$ npm install webpack --save-dev
2、編譯
在項(xiàng)目文件下
①新建一個(gè)文件entry.js并輸入內(nèi)容：
document.write("hello world!");
②新建一個(gè)index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
<!--這里src引用的bundle.js是webpack打包entry.js后生成的-->
</body>
</html>
③node里敲命令，編譯文件
$ webpack ./entry.js bundel.js
3、組件
entry.js是入口文件，一般還有各個(gè)組件模塊，從而引用實(shí)現(xiàn)復(fù)用。
①新建一個(gè)component.js文件，輸入
module.exports = "It works from component.js";
②修改入口文件entry.js
//document.write("hello world!");
document.write(require("./component.js"));
③node敲命令重新編譯，然后去瀏覽器里刷新查看
$ webpack ./entry.js bundel.js
4、css-loader和style-loader以及wepack.config.js
css-loader用來(lái)處理CSS文件；style-loader將樣式應(yīng)用在CSS文件上
①node里敲命令安裝這兩個(gè)模板
$ npm install css-loader style-loader --save-dev
②新建一個(gè)style.css文件
body{
background:red;
}
③更新修改entry.js
require("./style.css");
document.write(require("./content.js"));
④在項(xiàng)目文件下新建一個(gè)webpack.config.js文件并輸入
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
//注意：這里的style和css后面都要加"-loader"后綴，官網(wǎng)上教程沒(méi)有更新，詳情：https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
]
}
};
⑤node里敲命令編譯
這個(gè)時(shí)候只需要敲webpack就可以了，因?yàn)閃ebpack 在執(zhí)行的時(shí)候，除了在命令行傳入?yún)?shù)，還可以通過(guò)指定的配置文件來(lái)執(zhí)行。默認(rèn)情況下，會(huì)搜索當(dāng)前目錄的webpack.config.js
$ webpack
