webpack4实践指南(一)

Posted 2023-03-23

参考技术A 创建一个webpack项目需要做的基本操作：

为了能在浏览器看见项目的启动效果，我们需要展示的页面，按webpack官网教程手动创建必要的文件：

注意：

此时，就可以直接在编辑器打开网页，在浏览器中看见的效果图：

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式，在package.json中添加一个npm脚本：

在终端运行下面命令中任意一个都可以：

现在从编辑器直接打开页面，就可以看见相应的页面：

在webpack中使用webpack-dev-server，首先安装：

在package.json中添加：

webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载，但我们需要为它做一些配置，以便于告诉服务器，在哪里查找文件。
新建webpack.config.js文件，首先做基础配置：

然后为webpack-dev-server配置访问文件的入口：

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
然后我们运行脚本，在浏览器看一下启动效果：

此时又出现了新的问题，在web服务器上访问的文件只有dist，我们要如何才能看见像之前一样的页面呢？

在webpack.config.js文件下添加配置：

然后npm run start在浏览器打开的效果：

现在基本上已经达到了最基础的效果，如果想要扩展成为一个配置完整的webpack项目，还需要继续深入学习。