0 前言
0.1 工具版本
考虑到前端框架更新较快，这里将本次使用到的工具版本展示如下：
npm@5.8.0
node@8.11.1
webpack@4.6.0
webpack-cli@2.0.15
html-webpack-plugin@3.2.0
webpack-dev-server@3.1.3
0.2 文件结构
本次测试项目的文件结构如下：
myproject
│ package-lock.json
│ package.json
│
└─node_modules
│
└─src
index.html
index.js
1 准备工作
1.1 项目初始化
既然是实现webpack项目热编译，那第一步一定是需要一个基于webpack的项目啦。什么？你已经初始化好了，那么请跳过本节（章节1.1 项目初始化） ，直接阅读webpack-dev-server的安装与启用。
1.1.1 创建一个npm包
在命令提示符下进入项目根目录，输入命令如下：
npm init --yes
这样在项目根目录下会创建一个简单的package.json 文件。
如果package.json文件顺利创建，命令提示符会有如下提示：
Wrote to “我是你的项目根目录”\package.json:
{
"name": "项目根目录文件夹叫啥这里就是啥。建议英文目录，不要像我是中文，还这么长",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
1.2 引入依赖
1.2.1 引入webpack依赖
接下来要在项目中安装webpack包依赖，一个webpack项目怎么能没有webpack包呢，dei不dei。
这里选择在项目本地安装，开发时依赖，故在命令提示符中输入：
npm i -D webpack
安装webpack包成功后大概会看到类似这样的东西如下：
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN fsevents@1.2.0 had bundled packages that do not match the required version(s). They have been replaced with non-bundled versions.
npm WARN 测试项目文件夹@1.0.0 No description
npm WARN 测试项目文件夹@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack@4.6.0
added 407 packages from 327 contributors in 112.059s
其实只要看到最后一行显示 'added xxx packages from xxxx contributors in xx.xx s' 就可以了，只要没有 Error 就行，WARN不影响项目运行。
1.2.2 引入webpack-cli 依赖
有了webpack包，我们还需要webpack-cli作为与webpack交互的命令行接口。没错，'cli' 这玩意翻译过来就是命令行接口。
类似的，在命令提示符中输入：
npm i -D webpack-cli
安装成功会看到类似的东西如下：
npm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
[ .................] | fetchMetadata: WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recom[ .................] / fetchMetadata: WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recomnpm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN aattt@1.0.0 No description
npm WARN aattt@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack-cli@2.0.15
added 476 packages from 246 contributors in 138.819s
1.2.3 引入 html-webpack-plugin依赖
安装html-webpack-plugin，以便webpack能够识别并编译html文件。
类似的，在命令提示符中输入：
npm i -D html-webpack-plugin
安装成功后，会看到类似的东西如下：
npm WARN aattt@1.0.0 No description
npm WARN aattt@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ html-webpack-plugin@3.2.0
added 151 packages from 128 contributors in 28.704s
1.2.4 引入webpack-dev-server依赖
在命令提示符进入项目根目录，输入：
npm i -D webpack-dev-server
安装成功后，会看到类似这样的东西如下：
npm WARN 测试项目文件夹@1.0.0 No description
npm WARN 测试项目文件夹@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.0: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack-dev-server@3.1.3
added 344 packages from 194 contributors in 77.966s
1.3 配置项目文件
1.3.1 配置 webpack.config.js
具体配置如下：
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'main':'./src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename:'[name]_[hash:8].js'
},
plugins: [
new htmlPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
}
1.4 启动webpack-dev-server
1.4.1 向package.json添加指令
在pacakge.json的scripts属性对象中，添加一条属性 "start:dev": "webpack-dev-server"。即：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:dev": "webpack-dev-server"
},
1.4.2 执行命令，启动webpack-dev-server
在命令提示符中，输入：
npm run start:dev
此时，在浏览器访问 localhost:8080/index.html 即可。页面是热编译的，修改编辑器代码后等待3-5s即可查看效果。这种方式不会真的输出文件，如果需要输出文件，只需要在代码开发完成后，手动编译一次即可。
备注：看到这里，还记得我们安装的webpack-cli包吗？它提供了与webpack进行命令行交互的能力。在这里，当npm run start:dev命令执行时，如果我们没有安装webpack-cli包，webpack-dev-server命令就无法被识别啦。
今天就到这里。完
