一、使用webpack进行项目搭建:

一、快速初始化项目:

vscode新建终端运行：

npm init -y

得到一个package.json的配置文件，加载所有的包都会在该配置文件中记录

二、创建目录结构:

在项目根目录下创建src源代码目录和dist产品目录，并在src目录下创建index.html

三、使用cnpm安装webpack

一、安装过程中

当前文件目录下，新建终端运行：

cnpmiwebpack-Dcnpmiwebpack-cli-D

二、安装过程中出现的一系列问题

当安装完webpack后在终端输入webpack进行打包时出现

解决方法：

1.关闭vscode，并以管理员身份重启

2.在终端中输入：get-ExecutionPolicy，显示Restricted，表示状态是禁止的

3.再次输入：set-ExecutionPolicy RemoteSigned  有可能出现以下问题，赋上解决办法

4.根据报错提示再次输入 ：Set-ExecutionPolicy -Scope CurrentUser

5.提供参数值：remotesigned 显示成功限制解除

6.接下来我们输入webpack，突然出现以下情况，提示我们 mode缺少developm或production

7.新建一个webpack.config.js文件存放webpack需要的模块，里面代码如下：

// 向外暴露一个打包的配置对象 因为webpack是基于Node构建的；//所以webpack支持所有的Node API和语法module.exports= {
mode:'development'//development production}

8.终端输入webpack出现如下

模块没有找到？为啥呢。在webpack4.x+中有一个很大特性就是约定大于配置，默认打包的入口路劲是 src -> index.js。所以src下的js文件要修改index.js，如果修改别名就会报错。

9.修改之后，终端继续深入webpack，文件引入成功。

10.引入dist路劲下的main.js文件。查看index.html网站就会执行我们的js代码了，大功告成！！！

11.提及一点：上边提到的development和production的区别

development:开发者模式下dist下的main.js没有被压缩，代码格式友好但占资源多

production:生产者模式下dist下的main.js被压缩，代码格式不友好但占资源少

四、注意点:

1.webpack4.x提供了约定大于配置的概念；目的是减少配置文件的体积；

2.默认的打包入口是 src -> index.js ；打包的输出文件是dist -> main.js

3.4.x+中新增了mode选项，可选的值为：development和production

二、配置webpack进行实时打包编译

根据上文，虽然我们实现了webpack的打包，但是修改index.js内容之后，刷新页面并没有反应，为什么？我们想到了修改内容后必须还得在打包一次，但一次次修改一次次打包未免也太繁琐了，所以我们要下载一个工具，帮助我们进行实时打包。 能提高我们打包的性能。

cnpm i webpack-dev-server -D

提示安装成功，但有两个警告，提示我们依赖的包没有安装，这里手动安装解决一下。

命令如下：注意！这时的xxx为上述错误中的内容。

cnpminstall--save-devxxx//例如cnpminstall--save-devbufferutil@^4.0.1

下载完成后在package.json配置简单的命令

接下来在终端运行：npm run dev

执行成功

鼠标悬停在 http://localhost:8080/上，Ctrl+左键跳转网址

访问网址：http://www.localhost:8080/main.js

那为啥main.js这个网址能访问但没有在http://localhost:8080/上显现出来呢？

原来webpack-dev-server 打包好的mian.js是托管到内存中，并不会显示到物理磁盘中，所以在项目根目录中看不到；但是，我们可以认为，在项目根目录中，有一个看不见的main.js

点击http://localhost:8080/  下src f12打开控制台，调整js内容就能实时更新了

一定要点击链接下的src进入网页才行，如果在vscode的index.html右键 Open wirh Live Server会报错的，切记！！！总而言之：webpack为你提供了一个简单的web服务器。

进阶部分：

可以根据自己的需求设置相关信息。

这里讲解一下可能出现的问题：

1.npm run dev 默认执行端口为8080，自己本地执行端口不是8080怎么办？先浅解一个方法：

修改vscode默认浏览器打开的端口：

打开自己的Live Server插件点击设置打开扩展设置。

往下滑，找到设置端口的Port，点击在settings.json中编辑

修改settings.json内容，设置自己的端口号，比如8080

2. 虽然执行成功但跳转到本地网址时会出现以下问题：

？？为啥，后来了解到应该是自己的本地文件路径出现了问题，如何解决？

webpack.config.js里面添加内容，重启vscode即可

module.exports= {
mode: 'development', //development preductiondevServer: {
static: "./",
    }
}

3.虽然自己本地vscode设置端口是8080，webpack-dev-server默认端口也是8080，但有时会出现webpack-dev-server端口是8081，原因是当前的8080端口被占用。

4.虽然能网站打开，但为啥报错了，原因是我们还要修改js的文件路径

5.OK，差不多都解决完了，但上文那个控制台围绕“你好”的三条提醒能不能消除掉？试一下

点击node_modules,找到webpack下的log.js注释相关代码

剩下的俩个自己搞吧。哈哈哈

原创不易，呜呜~，看到这还不点赞加收藏？