webpack4.x快速搭建项目（实用）

webpack前端工程化构建工具 

---

1.创建项目文件夹（以webpack4.0为例）

2. 在文件夹中初始化项目

在vscode终端命令窗口运行npm init -y快速初始化项目生成

3.在项目文件夹下创建dist产品目录和src文件源代码目录

4.使用命令行npm i webpack -D或者cnpm i webpack -D安装webpack

     安装cnpm：npm i cnpm -g

5.使用命令行npm i webpack webpack-cli -D

6.新建文件webpack.config.js

webpack4.x提供约定大于配置的概念，目的是为了尽量减少 配置文件体积

    默认预定

• 打包入口文件：src-index.js
• 打包输入文件：dist-main.js
• 4.x中新建mode选项，可选值为：development和production

 具体webpack使用配置进入webpack4.0+构建项目查看

这样初步就可以了，但要记得在html页面中要引用dist下的main.js哦

---

webpack-dev-server使用

虽然这样可以达到预期效果，可是在我们每一次修改的时候还是要再一次进行webpack打包，很麻烦，这里有一样工具webpack-dev-server可以使用。

命令行npm i webpack-dev-server -D

在package.json中配置设备

"dev":"webpack-dev-server"

然后将设备运行

命令行npm run dev

这样一来会自动在整个项目文件夹中全局生成一个main.js文件

将主页中的引入的js文件路径改成全局/main.js。

配置package.json

--open  自动打开

--port 8081 端口

--progress 进度

--compress 压缩

--host 127.0.0.1 主机

--hot：无需刷新页面，即可看见修改代码保存后的效果；而且只是局部更新打包，减少不必要的打包，速度变快

--contentBase src：代码修改保存完运行或是浏览器输入 http://localhost:8080，直接打开 http://localhost:8080 下的 src文件，展示项目网页

---

实例化项目文件 html-webpack-plugin

首先停止 npm run dev 方法：ctrl+c 终止

输入 npm i html-webpack-plugin -D或者cnpm i html-webpack-plugin -D

在 webpack.config.js 文件中设置

重新跑一遍npm run dev就可以了

如有问题，欢迎各位批评指正！！！