分步：
1.在 cmd 里 cd 到 需要存文件的位置
e:
cd demo1
2.node -v 确认是否安装了node.js
3.npm init -y 创建一个 package.json文件
4.npm install webpack@4.41.0 -D
5.npm install webpack-cli@3.3.9 -D
6.在项目目录下新建 index.js
// index.js
console.log("this is index.js")
7.在项目目录下新建webpack.config.js
// webpack.config.js
const path = require('path') //引入 node.js 的 path 模块
module.exports = {
//production 注：在开发环境中，bundle.js 文件不会被压缩，而在生产环境中会被压缩
mode: 'development',
// __dirname表示当前目录，这一行代码相当于 当前目录/src/index.js
entry: path.join(__dirname, 'src', 'index.js')
output: {
filenamee: 'bundle.js',
// 在当前目录下新建 dist 文件夹，里面存放 bundle.js 文件
path: path.join(__dirname, 'dist')
}
}
8.在 package.json 里加一个 build 命令，在 scripts 下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
完整 package.json 文件
// package.json
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "test.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
},
"dependencies": {
"webpack": "^4.41.0"
}
}
9.在 cmd 项目路径下，npm run build 运行，我们就可以看到项目目录中新建了一个 dist 文件夹，里面存放着 bundle.js 文件，bundle.js 文件中拿到了 entry 中定位到的 index.js 文件
10.在 src 下新建一个 index.html 网页，里面随便写点内容
11.npm install html-webpack-plugin -D 安装解析 html 的插件，安装完要在 webpack.config.js 中引入
// webpack.config.js
const path = require('path') //引入 node.js 的 path 模块
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入 html-webpack-plugin 插件
module.exports = {
//production 注：在开发环境中，bundle.js 文件不会被压缩，而在生产环境中会被压缩
mode: 'development',
// __dirname表示当前目录，这一行代码相当于 当前目录/src/index.js
entry: path.join(__dirname, 'src', 'index.js')
output: {
filenamee: 'bundle.js',
// 在当前目录下新建 dist 文件夹，里面存放 bundle.js 文件
path: path.join(__dirname, 'dist')
},
plugins: [ //配置 plugins 数组
new HtmlWebpackPlugin({ //根据 template 定义的文件模板，产出 filename 下定义的文件名的 html 页面
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html'
})
],
devServer: { //启动本地服务的配置
port: 3000, //端口定义为 3000
//当前目录为 dist 文件夹
contentBase: path.join(__dirname, 'dist')
}
}
12.npm install webpack-dev-server@3.8.2 -D 安装启动服务的插件，在这里为了避免 webpack 和 webpack-dev-server 版本不兼容，所以使用的是指定的版本
13.然后要启动服务，就要在 package.json 下的 scripts 里增加一个命令
"dev": "webpack-dev-server"
14.在 cmd 项目目录下 npm run dev，在浏览器访问 localhost: 3000/index.html 就能看到我们的页面了
流程总结：
首先我们通过定义项目的环境是开发环境还是生产环境决定 bundle.js 也就是我们的出口文件要不要压缩，然后通过文件位置指定入口文件和出口文件，当出口文件不存在时，webpack 会帮我们新建。然后我们通过在 package.json 里定义 build 和 dev 命令使得我们可以在 cmd 中使用 npm run build 或者 npm run dev 命令来创建和启动服务。在我们启动服务之前，需要先通过 html-webpack-plugin 插件来解析我们的 html 文件，我们通过 new HtmlWebpackPlugin 对象的形式，根据 template 属性的文件位置指定模板 html 文件，在 dist 也就是我们的出口文件目录下 新建一个 （filename 属性的 value） 的 html 文件。最后我们配置 devServer 的 port 端口和 contentBase 根目录位置使得我们可以在浏览器的 3000 端口看到已经经过解析的 index.html 文件，这个文件实际上是我们 src 目录下的 index.html 文件，插入了 bundle.js ，所以我们在浏览器可以看到入口文件 index.js 被调用后浏览器上打印出了 "this is index.js"
