创建webpack5.x项目

1、新建文件夹webpack-demo,并通过vscode打开;在vscode中在集成终端中打开

创建webpack5.x项目创建webpack5.x项目

 

 

 

 2、初始化项目,创建package.json;在在集成终端中输入以下指令

npm init -y

创建webpack5.x项目

 

 

 

3、创建项目目录

  1. 在根目录下创建src源代码目录和dist打包目录
  2. 在src目录下新建index.html首页和index.js(webpack5.x默认的程序入口文件)

index.html内容:

创建webpack5.x项目

 

 

 index.js内容:

创建webpack5.x项目

 

 

 

4、安装webpack及webpack-cli

npm install webpack webpack-cli -D

此时,项目新增node_modules目录和package-lock.json文件;项目结构为:

创建webpack5.x项目

 

 

 

5、配置webpack

在项目的根目录下新增webpack.config.js文件

创建webpack5.x项目

 

 

 

6、执行webpack打包

在集成终端执行指令  webpack   指令,在默认在dist目录下生成  main.js 打包文件

创建webpack5.x项目

 

 

7、运行项目查看效果

在index.html文件中手动引入,打包好的main.js文件

创建webpack5.x项目

 

 运行index.html在浏览器中查看运行结果:

创建webpack5.x项目

 

 此时,我们已经成功创建打包webpack5.x项目,但是还有一个问题:当我们更改源代码后,并不会实时自动打包main.js文件,我们不可能每次修改完代码都执行一次webpack手动打包main.js,

所以:

 

8、安装webpack开发服务器

执行以下指令安装 webpack-dev-server

npm install webpack-dev-server -D

修改package.json文件,添加如下内容:

创建webpack5.x项目

 

 在集成终端运行指令

npm run serve

创建webpack5.x项目

 

 访问http://localhost:8080

效果如下:

创建webpack5.x项目

 

在此,先 手动点击src,默认访问index.html

效果如下:

创建webpack5.x项目

 

 当前又有一个问题,这需要我们手动访问src下的index.html,解决方式如下:

 

9、安装html-webpack-plugin

执行以下指令安装html-webpack-plugin

npm install html-webpack-plugin -D

修改webpack.config.js文件,内容如下:

创建webpack5.x项目

 

 

重新执行  npm run serve   指令重新运行程序

效果如下:

创建webpack5.x项目

 

 

此时,我们看到效果了,但是却出现了2此输出效果,这是因为webpack自动帮我们打包引用了main.js,而我们还手动引用了main.js,此时我们修改index.html去掉手动引入script

创建webpack5.x项目

 

 

重新到浏览器看效果

创建webpack5.x项目

 

 

此时,我们只看到了一次输出效果,现在我们修改index.js中的源代码并保存,看看是否能够做到实时自动打包

修改内容如下:

创建webpack5.x项目

 

 

回到浏览器看实时效果:

创建webpack5.x项目

10、本项目所使用的的插件版本

创建webpack5.x项目

 

上一篇:【pytorch】RuntimeError: 1only batches of spatial targets supported (3D tensors) but got targets of si


下一篇:【webpack5修行之道】第17篇:性能优化-dll打包