webpack 4.x创建项目的过程

第一步 新建一个空文件夹 my-project

第二部 初始化项目

1.npm init -y 创建packge.json文件
2.手动创建src和dist目录
3.在src目录下面创建index.html文件和index.js文件
4.npm i webpack -D
5.npm i webpack-cli -D

tips:如果项目最终运行报错,可以直接npm i webpack-cli，然后再重启项目

6.创建webpack.config.js打包入口文件，并输入打包配置

7. npm i webpack-dev-server -D 安装webpack-dev-server，实现实时打包
8.在packge.json文件中添加配置
“dev”: “webpack-dev-server --open --port 3000 --hot”

"dev"的各个参数的含义如下
webpack-dev-server：启动实时打包
–open：自动在浏览器运行项目
–port 300：项目运行于3000端口
–hot：热启动
8. npm i html-webpack-plugin -D 配置html-erbpack-plugin插件
9. 在webpack.config.js文件中引入html-erbpack-plugin插件，创建html-erbpack-plugin插件实例，并挂载

附上一段代码

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebPackPlugin({
  template: path.join(__dirname, './src/index.html'),
  filename: 'index.html'
})

module.exports = {
  mode: 'development',
  plugins: {
    htmlPlugin
  }
}

10.最后，可以在你的html文件中添加一些内容，然后执行npm run dev，就可以看到结果啦