webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
webpack.png
一、安装
#全局安装webpack
$ npm install -g webpack
#成功之后看看版本号
$ webpack --version
4.4.1
#全局安装 webpack-cli （webpack的4版本之后，需要单独安装webpack-cli）
$ npm install -g webpack-cli
#成功之后看看版本号
$ webpack-cli --version
2.0.14
二、项目工程使用webpack
1、自动创建package.json,包含项目名称、项目描述、作者等信息
# 先建立一些文件夹
$ mkdir webpack_app
$ cd webpack_app
$ mkdir app
$ mkdir public
$ npm init
// package.json
{
"name": "webpack_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
}
2、在本项目中安装webpack作为依赖包
// 安装Webpack
$ npm install --save-dev webpack
// package.json
{
"name": "webpack_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
3、在项目中添加 html 和 js 文件：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
app文件夹用户存放原始数据和 js 模块，public文件夹用来存放供浏览器读取的文件（包含 webpack 打包生成的js文件），目录布局如下
$ tree -L 2
├── app
│ ├── Greeter.js
│ └── main.js
├── node_modules
│ ├── acorn
│ ├── acorn-dynamic-import
│ ├── ...
│ ├── ...
│ ├── ...
│ ├── y18n
│ └── yallist
├── package-lock.json
├── package.json
└── public
├── bundle.js
└── index.html
4、使用webpack打包得到 bundle.js
$ webpack app/main.js --output-filename bundle.js --output-path public/ --mode development
$ webpack app/main.js --output-filename bundle.js --output-path public/ --mode development
Hash: 0e7bdca1d4ed7ff39786
Version: webpack 4.4.1
Time: 104ms
Built at: 2018-4-9 11:13:07
Asset Size Chunks Chunk Names
bundle.js 3.37 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/Greeter.js] 156 bytes {main} [built]
[./app/main.js] 107 bytes {main} [built]
5、使用浏览器打开 index.html 看效果：
webpack_demo1.jpeg
6、通过配置文件来使用 webpack，在当前文件夹新建 webpack.config.js 文件
// webpack.config.js
module.exports = {
// __dirname: node.js中的一个全局变量，指向当前执行脚本所在的目录
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
mode: "development",
output: {
path: __dirname + "/public", //打包之后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}
然后执行 webpack 的时候，会自动引用 webpack.config.js 文件中的配置选项
$ webpack
Hash: 0e7bdca1d4ed7ff39786
Version: webpack 4.4.1
Time: 122ms
Built at: 2018-4-9 11:45:51
Asset Size Chunks Chunk Names
bundle.js 3.37 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/Greeter.js] 156 bytes {main} [built]
[./app/main.js] 107 bytes {main} [built]
在命令行中输入命令需要代码类似于 webpack 这样的路径其实是比较烦人的，不过值得庆幸的是 npm 可以引导任务执行，对 npm 进行配置后可以在命令行中使用简单的 npm start 命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下:
{
"name": "webpack_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}
npm的 start 命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用 npm start 就可以执行其对于的命令，如果对应的此脚本名称不是 start ，想要在命令行中运行时，需要这样用 npm run {script name} 如npm run build，我们在命令行中输入npm start试试，输出结果如下：
$ npm start
> webpack_app@1.0.0 start /Users/denglibing/denglibing/HarryProject/Vue/webpack_app
> webpack
Hash: 634165e44db6bf85f5b9
Version: webpack 4.5.0
Time: 111ms
Built at: 2018-4-9 12:42:31
Asset Size Chunks Chunk Names
bundle.js 4.36 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/Greeter.js] 156 bytes {main} [built]
[./app/main.js] 107 bytes {main} [built]
也就是说，打包方式现在有三种方式，但是其实本质还是一样的。
7、webpack 生成 Source Maps 是调试更容易
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
| devtool选项 | 配置结果 |
|---|---|
source-map |
在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度； |
cheap-module-source-map |
在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； |
eval-source-map |
使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项； |
cheap-module-eval-source-map |
这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。 |
对小到中型的项目中，eval-source-map 是一个很好的选项，再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置:
// webpack.config.js
module.exports = {
// __dirname: node.js中的一个全局变量，指向当前执行脚本所在的目录
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
mode: "development",
devtool: "eval-source-map",
output: {
path: __dirname + "/public", //打包之后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}
8、使用 webpack 构建本地服务器
webpack 提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
$ npm install --save-dev webpack-dev-server
成功之后， package.json 会变成这样：
{
"name": "webpack_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}
devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考这里
| devserver的配置选项 | 功能描述 |
|---|---|
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录） |
| port | 设置默认监听端口，如果省略，默认为”8080“ |
| inline | 设置为true，当源文件改变时会自动刷新页面 |
| historyApiFallback | 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html |
把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示:
// webpack.config.js
module.exports = {
// __dirname: node.js中的一个全局变量，指向当前执行脚本所在的目录
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
mode: "development",
devtool: "eval-source-map",
output: {
path: __dirname + "/public", //打包之后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
{
"name": "webpack_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack",
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}
正如上面所说的，想要使用 npm 去执行 "server": "webpack-dev-server --open"，只需要在终端执行 npm run server 即可在本地的 8080 端口查看结果:
npm run server
> webpack_app@1.0.0 server /Users/denglibing/denglibing/HarryProject/Vue/webpack_app
> webpack-dev-server --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: 9321f0b8a98cc7c03b80
Version: webpack 4.5.0
Time: 1014ms
Built at: 2018-4-9 12:50:35
Asset Size Chunks Chunk Names
bundle.js 838 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/Greeter.js] 156 bytes {main} [built]
[./app/main.js] 107 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/node-libs-browser/node_modules/punycode/punycode.js] 14.3 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/sockjs-client/dist/sockjs.js] 176 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js 40 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
+ 12 hidden modules
ℹ ｢wdm｣: Compiled successfully.
同时浏览器上会自动打开 index.html ，现在修改 Greeter.js 浏览器页面便会实时刷新最新的数据了。
