第一： 先说开发环境，使用vscode, github:
https://github.com/hyyfrank/webpack4.git
概念啥的很多地方都讲过了，这里水一下，请看文档：
https://www.webpackjs.com/concepts/
OK, 接着开始讲怎么用，一般项目需要的功能，我们一个个做,先做个例子，看看打包大概流程是怎么样的，不bb.
先用npm初始化项目，当然用yarn也行，执行npm -init -y 就生成package.json文件了(最好换cnpm稍微快点)
先去vscode的plugin下一个html boilerplate然后写html就舒服了，先写个html,这时候只要简单建个文件输入html:5回车，就得到一个简单的html5文件了
简单加个css文件和js文件，那三剑客就齐了，这也是最网页最简单的样子了
<!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>
为了简单看到html网页的效果，我们装个库：cnpm install http-server -g
我要用webpack自然得装下，cnpm install webpack -g
启动网页，用我们刚才得http-server: http-server -p 3000
访问http://127.0.0.1:3000/就能看到简单页面
———卧室分割线-------------
简单网页打完收工。接着就是来使用webpack来打包和混淆了js了。
- 先简单试一下：./node_modules/webpack/bin/webpack.js ./main.js bundle.js
然后你去把html 里的js的src改成bundle.js，打开网页看下，也是好的，说明webpack已经把main.js打包成bundle.js了，你可以去看下里边代码长什么样，有个了解
- 当然，我不能每次都自己动手去改这个html和输入命令吧，所以我们webpack提供了配置文件的方式来让你写，结合package.json里的scripts部分，可以让我们加命令，这样就不会敲命令敲到手软了
——卧室分割线-------
- 开始正式打包
-
web pack.config.js长这样：
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" } };
和我们刚才命令行差不多，不过这次用配置文件的方式展示出来,啥意思呢，就是上面注释那意思。什么，你不知道entry和output的意思，拜托，稍微看下文档，中文的也行啊，起码有个大概了解【参考文章开始的链接】，写完这个，直接在当前目录下打webpack命令搞定！
然后我们把命令放在package.json里的scripts部分，以后直接npm run build就跑这个构建命令，就方便了，如下：(这里webpack是全局装的，方便点)
"build": "webpack"
OK,那我每次执行完构建，会生成一个build目录，我不想每次自己手动去删掉，所以，我们可以构建之前先删除这个文件，然后再开始构建，简单装个酷，cnpm install rmdir-cli,然后我们的package.json里的build脚本变成：
"build": "rmdir-cli build && webpack --watch"
稍微调整下文件结构，加个src目录来放js, 只需要修改下webpack.config.js里的entry的路径就可以了,当然了你html如果要应用到文件，js的src要改成从build中去取就行了，详细代码看我的github repo,watch就是为了你能监听文件的变化，修改文件webpack重新编译你也能看到
因为支持webpack支持ES6、CommonJs和AMD规范，所以都可以在js里去写，举个栗子，加上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;
}
重新构建下，跑一下，看看打开html里的chrome dev tool,看看a+b=3有没有打出来。搞定！
看一眼打完包是什么样子
!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)
}
]);
今天困了，先写到这吧，不知道说啥了，扯个淡收场吧！
