配置一个完整项目的webpack

话不多说，直接上步骤：

1、创建一个项目，例如：webpack
在根目录(webpack)下建立两个文件夹 dist 和 src；
其中 src下创建文件夹如下：

2、在根目录下输入npm init -y 初始化项目，点击回车，这时项目中会生成一个 package.json 文件。如图：

3、使用 cnpm 安装 webpack ，运行指令 cnpm i webpack -D
4、运行指令 cnpm i webpack-cli -D
5、由于导入文件用的是ES6导入模块方式，ES6 的代码浏览器解析不了，所以要把他编译成浏览器可以解析的格式。 在命令行输入webpack .\src\main.js -o .\dist\bundle.js ，此时dist文件夹下多了一个文件bundle.js
注：①这两个路径分别是：要打包的文件的路径 ，打包好的输出文件的路径 ②一定要注意 webpack4.x版本打包命令多了一个-o
6、 在项目根目录下输入cnpm i webpack-dev-server -D (实时刷新页面)，解决了修改页面每次都要重新生成且编译 main.js 文件过于麻烦的问题。
7、在项目根目录下创建 webpack.config.js 文件，配置如下：

const path = require('path')
module.exports = {
   
  //在配置文件中我们需要手动指定入口和出口
  
  //入口 表示要使用webpack打包哪个文件
  entry: