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`中。

安装：

做用：

1：自动在内存中根据指定页面生成一个内存页面

2：自动把打包好的bundle.js追加到页面中

 

 九：loader配置处理css样式表

简介：

webpack 最出色的功能之一就是，除了 JavaScript，还能够经过 loader 引入任何其余类型的文件。也就是说，以上列出的那些 JavaScript 的优势（例如显式依赖），一样能够用来构建网站或 web 应用程序中的全部非 JavaScript 内容。

直接引入会报错：

注意：webpack默认只能打包处理JS类型文件，没法处理其余非JS类型的文件，若是要出路非JS类型的文件，咱们须要安装第三方loader加载器

1：安装两个loader加载器：

2：安装后打开webpack.config.js这个配置文件，在里面新增一个配置节点，叫作module，他是一个对象，在这个modules对象上，有一个rules属性，这个rules属性是个数组，存放了全部的第三方文件的匹配和处理规则

3：css文件中写css样式

4：入口文件main.js引入css文件

注意：webpack处理第三方类型文件的过程

1：发现这个要处理的文件不是JS文件，而后就去配置文件中，查找有没有对应的第三方loader规则

2：若是能找到对应的规则，就会调用对应的loader处理这种文件类型

3：在调用loader时候是从后往前调用的

4：当最后一个loader处理完毕，会将处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去

 十：loader配置处理less文件

less简介：

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 能够运行在 Node 或浏览器端。

直接引入文件会报错：

解决方法：

1：安装less-loader

2：less-loader运行须要依赖内部ess，因此须要安装less

3：配置处理规则

4：入口文件main.js引入less文件

十一：loader配置处理sass文件

sass简介：

sass是一种对css的一种提高，能够经过编译生成浏览器能识别的css文件。sass技术的文件的后缀名有两种形式：.sass和.scss。这两种的区别在于.sass文件对代码的排版有着很是严格的要求，并且没有大括号，没有分号。

问题：同上直接引用会报错，须要安装loader

解决方法：

1：安装sass-loader

2：安装node-sass

3：配置处理规则

4：引入使用

十二：url-loader的使用

默认状况下webpack没法处理css文件中的url地址，不管是图片仍是字体库，只要是url地址都处理不了

引入url路径，会报错：

解决方法：

1：安装url-loader

2：webpack.config.js中配置匹配规则

3：会有新问题出现，路径会自动转义成字节编码格式

解决方法：给loader传参数，？传参limit给定的值是图片的大小，单位是byte，若是引用的图片大于或等于给定的limit值，则不会转成base64格式的字符串，若是图片小于给定的limit值，则会被转为base64格式

查看文件字节大小，右击查看属性：

 

webpack为了不图片名重复，生成的是hash值，不是源代码路径

若是想生成的是源代码本身写的路径名，解决方法，再添加一个name的参数，让name等于原来的name：

以上有个问题，会因为不是很识别图片路径之前的目录，容易形成一个页面不一样目录下的相同图片名称引用覆盖现象，

解决方法，limit参数name前加一个hash值，好比=[hash:8]-[name]... 表示在name前加一个取32位hash值前8位的值

十三：url-loader的处理文字文件

案例分析，好比引用bootstrap中字体样式：

1：main.js入口文件引入bootstrapt.css，不写node_modules，默认去node_modules去找

2：webpack.config.js中定义匹配规则

3：使用出效果

十四：webpack会碰到的问题

1：命令报错

 

解决方法：检查是否有node_modules或者其中是否有这个包，没有node_modules从新安装

注意：查看webpack.json文件依赖记录是不可靠的，这只是曾经安装的一个记录，并不表明记录存在包就永远存在

2：报错在json文件中存在unpected tock，不期待的标记

解决方法：检查是否有注释符号或多余符号

注意：JSON文件中不容许写注释

十五：webpack中babel的配置

使用static关键字，能够定义静态属性，所谓的静态属性，就是能够直接经过类型直接访问的属性；实例属性是只能经过类的实例来访问的属性

执行上面代码会报错，没法识别：

解决分析：在webpack中，默认只能处理一部分ES6新语法，一些更高级的ES6语法或ES7语法，webpack是处理不了的，这时候就须要借助第三方的loader来帮助webpack处理这些高级语法， 当第三方loader把高级语法转换成低级语法以后，会把结果交给webpack打包到bundle.js

经过Babel，能够帮咱们将高级的语法转化为低级的语法

1：在webpack中，能够运行以下两套命令，安装两套包，去安装Babel相关的loader功能

1.1：npm install babel-core babel-loader babel-plugin-transform-runtime -d

1.2：npm install babel-preset-env babel-preset-stage-0 -d

2：打开webpack配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

2.1{test:/\.js$/,use:'babel-loader',exclude:/node_modules}

2.2注意：在配置规则时候必须把node_modules经过exclude选项排除掉，缘由有两：

2.2.1若是不排除node_modules,则babel会把node_modules中全部的第三方js文件都打包编译，这样，会消耗CPU，同时，打包很是慢

2.2.2哪怕最终Babel中全部node_modules转换完毕了，可是项目也没法正常进行

3：在项目的根目录中，新建一个叫作.babelrc配制的时候必须符合JSON语法规范，不能写注释，字符串必须用双引号，

3.1在babelrc写以下配置，你们能够把preset翻译成【语法】的意思

{

"presets":["env","stage-0"],

"plugins":["transform-runtime"]

}

4了解：目前安装的babel-preset-env是最新的ES6语法，以前安装babael-preset-es2015

注意：因为版本更新问题，以上操做可能会报错，参考以下：

实在不行，就全卸载从新按

最后把babel-preset-stage-0 卸载，而后修改.babelrc文件

注意：最终本人本例解决方案以下：

问题：

解决：先卸载再装低版本

问题：

解决：

十六：webpack中使用vue文件

安装vue

默认webpack没法打包vue文件，须要安装相关的loader

在配置文件中，新增配置项

render渲染组件

 总结：

 

谢谢路过