webpack安装，常见问题和基本插件使用 / 憋错料

一：webpack认识

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

二：webpack安装

安装准备：

1：安装node最新版本

2：安装npm

成功安装后可cmd查看,可以查看版本号则成功了第一步

全局安装：

cmd安装

这样安装一般都是最新版本 webpack 4+ 版本，你还需要安装 CLI

安装成功后cmd查看版本号

注意：全局安装只要电脑不发生问题，就无需多次安装，但是官方不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

本地安装：

要安装最新版本或特定版本，请运行以下命令之一：

如果你使用 webpack 4+ 版本，你依然还需要安装 CLI

对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：

当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

三：安装出现问题

1：配置警告：“模式”选项尚未设置，webpack将返回“生产”获取此值。将“mode”选项设置为“development”或“.”，以便为每个环境启用默认值。

解决方法：在package.json中配置下;

然后运行转换命令行=时后加上 --mode development

2：明明已经安装，却找不到webpack模块

解决方法：一般是路径错误，查看路径是否正确，反斜杠是否正确，还有本例中是webpack路径错误，应该是

3：文件代码引用模块找不到

解决方法：因为没有安装对应包，需要安装一下：

成功后在package.json中可以查看依赖包

4：在安装时可能会报错不存在webpack一些问题，安装之前需要初始化：

初始化完成后项目中将存在json文件和node_modules:

5：如果全局安装，现在又想本地安装，需先删除全局：

6：NPM错误！在1:257的基准下没有找到任何值

解决方法：

1.卸载本地node

2.删除本地 ../AppData/Roaming/npm ../AppData/Roming/npm-cache 这两个文件夹

windows命令path查看你的位置在哪里我本地位置：C:\Users\***\AppData\Roaming\npm C:\Users\***\AppData\Roaming\npm-cache

3.重新下载安装node

官网地址：https://nodejs.org/en/

4.检查node安装是否成功

>node -v --查看node版本

>npm -v --查看npm版本

>npm install webpack -g --安装webpack

>webpack -h --查看webpack版本

如果以上命令执行都ok，那么恭喜你，环境已经安装好了。

四：webpack可以做什么呢

1：webpack可以处理js间的相互依赖关系

2：webpack能处理js的兼容问题，把高级的浏览器不识别的语法转为低级的能正常识别的语法

五：配置文件webpack.config.js

配置打包文件出口入口

命令行直接运行命令打包

注意：可能会出现错误：

解决方法：命令行打包时既没有给出口入口文件，也没有配置文件进行配置出入口

过程分析：当我们在控制台直接输入webpack命令执行的时候，webpack做了以下几步：

1：首先webpack发现，我们并没有通过命令的形式，给它指定入口和出口

2：webpack就会去项目的根目录中区查找一个叫做webpack.config.js的配置文件

3：当找到这个配置文件后，webpack会执行并解析这个配置文件，会得到配置文件中导出的配置对象

4：当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建

六：使用webpack-dev-server工具，实现自动打包编译功能

简介：是一个小型node.js express服务器，新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器，启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

本地安装：

注意：安装完后直接执行命令会报错

分析：项目中是本地安装的webpack-dev-server ,所以无法把它当做脚本命令，在powersell终端中直接运行（只有那些安装到全局的命令 -g,才能在终端中正常运行）

解决：package.json中配置命令

终端中运行命令：

然后修改代码保存后就直接更新打包了，成功后会生成下面配置路径

注意：webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘中，而是直接托管到电脑的内存中，所以，我们在项目目录中看不到它，但是可以认为和dist,src,node_modules平级有一个看不见的文件bundle.js(避免对此修改保存文件，实时更新打包消耗磁盘)

这个时候项目中引用的bundle.js和打包中引用的bundle.js不是一个文件了，所以这个时候

项目中引用bundle需要改成：

访问文件需要：

另外需要注意的几个问题：

1：node_modules包有问题

解决方法：删除node_modules包，重新安装

2：所有包装完后，webpack-dev-server想正常运行，全局安装过了也不行，在本地项目中必须安装webpack

解决方法：项目本地重新安装webpack包

七：webpack-dev-server常用命令参数

1：修改后自动打开浏览器

2：修改后自动打开浏览器并设置访问端口号为3000

3：修改后自动打开浏览器并设置访问端口号为3000，并设置打开文件路径是http://localhost:8080/src/

4：修改后自动打开浏览器并设置访问端口号为3000，并设置打开文件路径是http://localhost:8080/src/，而且浏览器页面无刷新更新

注意：以上四个参数可以在webpack.config.js中配置，供了解

错误记录：配置对象不存在，本例原因是devServer单词错误，S应该大写

注意：webpack.config.js配置后浏览器会报错，禁用热模块替换

解决方法：

1：检查devServer配置hot是否开启

2：检查是否安装webpack并在配置文件中导入

2：配置文件

module.exports导出模块中new一个热更新模块

八：html-webpack-plugin插件使用

简介：

插件的基本作用就是生成html文件。原理很简单：将 webpack中`entry`配置的相关入口chunk 和 `extract-text-webpack-plugin`抽取的css样式插入到该插件提供的`template`或者`templateContent`配置项指定的内容基础上生成一个html文件，具体插入方式是将样式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。

安装：