第一： 先說(shuō)開(kāi)發(fā)環(huán)境，使用vscode, github:
https://github.com/hyyfrank/webpack4.git
概念啥的很多地方都講過(guò)了，這里水一下，請(qǐng)看文檔：
https://www.webpackjs.com/concepts/
OK, 接著開(kāi)始講怎么用，一般項(xiàng)目需要的功能，我們一個(gè)個(gè)做,先做個(gè)例子，看看打包大概流程是怎么樣的，不bb.
先用npm初始化項(xiàng)目，當(dāng)然用yarn也行，執(zhí)行npm -init -y 就生成package.json文件了(最好換cnpm稍微快點(diǎn))
先去vscode的plugin下一個(gè)html boilerplate然后寫(xiě)html就舒服了，先寫(xiě)個(gè)html,這時(shí)候只要簡(jiǎn)單建個(gè)文件輸入html:5回車(chē)，就得到一個(gè)簡(jiǎn)單的html5文件了
簡(jiǎn)單加個(gè)css文件和js文件，那三劍客就齊了，這也是最網(wǎng)頁(yè)最簡(jiǎn)單的樣子了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./main.css">
<title>Hello Webpack</title>
</head>
<body>
<h2>Say hello to webpack4!</h2>
<script src="./bundle.js"></script>
</body>
</html>
為了簡(jiǎn)單看到html網(wǎng)頁(yè)的效果，我們裝個(gè)庫(kù)：cnpm install http-server -g
我要用webpack自然得裝下，cnpm install webpack -g
啟動(dòng)網(wǎng)頁(yè)，用我們剛才得http-server: http-server -p 3000
訪(fǎng)問(wèn)http://127.0.0.1:3000/就能看到簡(jiǎn)單頁(yè)面
———臥室分割線(xiàn)-------------
簡(jiǎn)單網(wǎng)頁(yè)打完收工。接著就是來(lái)使用webpack來(lái)打包和混淆了js了。
- 先簡(jiǎn)單試一下：./node_modules/webpack/bin/webpack.js ./main.js bundle.js
然后你去把html 里的js的src改成bundle.js，打開(kāi)網(wǎng)頁(yè)看下，也是好的，說(shuō)明webpack已經(jīng)把main.js打包成bundle.js了，你可以去看下里邊代碼長(zhǎng)什么樣，有個(gè)了解
- 當(dāng)然，我不能每次都自己動(dòng)手去改這個(gè)html和輸入命令吧，所以我們webpack提供了配置文件的方式來(lái)讓你寫(xiě)，結(jié)合package.json里的scripts部分，可以讓我們加命令，這樣就不會(huì)敲命令敲到手軟了
——臥室分割線(xiàn)-------
- 開(kāi)始正式打包
-
web pack.config.js長(zhǎng)這樣：
const path = require("path"); module.exports = { entry: { app: "./src/main.js" }, output: { publicPath: __dirname + "/build/", // js引用路徑或者CDN地址 path: path.resolve(__dirname, "build"), // 打包文件的輸出目錄 filename: "bundle.js" } };
和我們剛才命令行差不多，不過(guò)這次用配置文件的方式展示出來(lái),啥意思呢，就是上面注釋那意思。什么，你不知道entry和output的意思，拜托，稍微看下文檔，中文的也行啊，起碼有個(gè)大概了解【參考文章開(kāi)始的鏈接】，寫(xiě)完這個(gè)，直接在當(dāng)前目錄下打webpack命令搞定！
然后我們把命令放在package.json里的scripts部分，以后直接npm run build就跑這個(gè)構(gòu)建命令，就方便了，如下：(這里webpack是全局裝的，方便點(diǎn))
"build": "webpack"
OK,那我每次執(zhí)行完構(gòu)建，會(huì)生成一個(gè)build目錄，我不想每次自己手動(dòng)去刪掉，所以，我們可以構(gòu)建之前先刪除這個(gè)文件，然后再開(kāi)始構(gòu)建，簡(jiǎn)單裝個(gè)酷，cnpm install rmdir-cli,然后我們的package.json里的build腳本變成：
"build": "rmdir-cli build && webpack --watch"
稍微調(diào)整下文件結(jié)構(gòu)，加個(gè)src目錄來(lái)放js, 只需要修改下webpack.config.js里的entry的路徑就可以了,當(dāng)然了你html如果要應(yīng)用到文件，js的src要改成從build中去取就行了，詳細(xì)代碼看我的github repo,watch就是為了你能監(jiān)聽(tīng)文件的變化，修改文件webpack重新編譯你也能看到
因?yàn)橹С謜ebpack支持ES6、CommonJs和AMD規(guī)范，所以都可以在js里去寫(xiě)，舉個(gè)栗子，加上es6：
main.js
import addtwo from "./add"
console.log("javascript say hello.")
addtwo(1,2)
add.js
export default (a, b) => {
console.log("a+b =",a+b)
return a + b;
}
重新構(gòu)建下，跑一下，看看打開(kāi)html里的chrome dev tool,看看a+b=3有沒(méi)有打出來(lái)。搞定！
看一眼打完包是什么樣子
!function(e) {
var t = {};
function r(n) {
if (t[n])
return t[n].exports;
var o = t[n] = {
i: n,
l: !1,
exports: {}
};
return e[n].call(o.exports, o, o.exports, r),
o.l = !0,
o.exports
}
r.m = e,
r.c = t,
r.d = function(e, t, n) {
r.o(e, t) || Object.defineProperty(e, t, {
enumerable: !0,
get: n
})
}
,
r.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}),
Object.defineProperty(e, "__esModule", {
value: !0
})
}
,
r.t = function(e, t) {
if (1 & t && (e = r(e)),
8 & t)
return e;
if (4 & t && "object" == typeof e && e && e.__esModule)
return e;
var n = Object.create(null);
if (r.r(n),
Object.defineProperty(n, "default", {
enumerable: !0,
value: e
}),
2 & t && "string" != typeof e)
for (var o in e)
r.d(n, o, function(t) {
return e[t]
}
.bind(null, o));
return n
}
,
r.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
}
: function() {
return e
}
;
return r.d(t, "a", t),
t
}
,
r.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}
,
r.p = "/Users/hyy/github/webpack4/build/",
r(r.s = 0)
}([function(e, t, r) {
"use strict";
r.r(t);
console.log("javascript say hello."),
((e,t)=>(console.log("a+b =", e + t),
e + t))(1, 2)
}
]);
今天困了，先寫(xiě)到這吧，不知道說(shuō)啥了，扯個(gè)淡收?qǐng)霭桑?/p>
