原生浏览器，不能很好的识别 ES6 以及更高版本中 ES moudule 模块引入方式。代码中使用 ES moudule ，可以通过webpack进行打包编译成浏览器识别的语法。

webpack，是一个模块打包工具。

原因：一般，webpack是安装在当前项目下。但是执行webpack -v 时，node会全局目录找，所以找不到。

方法：既然当前目录下安装了，当前目录下支持npx查看。 npx webpack -v

6、import引入js、css、图片等文件时，必须用相对路径或者绝对路径，否则报错。

三、webpack核心概念讲解

loader加载顺序：从后到前

了解css的模块化打包：避免全局污染，样式只针对当前文件有效。

模块化打包涉及到的参数：

多个entry入口和多个output输出的配置

解决源代码和目标生成代码直接的映射关系。

它允许在运行时更新所有类型的模块，而无需完全刷新。（css：css-loader内置了HMR，自动只更新修改的css，其他不更新，所以不刷新页面。js：js没有相关模块内置，需要手动配置，）注：此功能对css友好，js不友好。因为js需要做许多配置，css不需要。

babel使用的两种方式：

mode:"development"下，无用代码依然存在，但会清楚表明哪些用了，哪些没用。便于开发嘛。

mode:"producton"下，无用代码会被删除，因为上线了嘛。

development(开发环境) 和 production(生产环境)这两个环境下的构建目标存在着巨大差异。

而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。

由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

代码分割，和webpack无关

常用的代码分离方法有三种：
入口起点：使用 entry 配置手动地分离代码。 //手动配置
动态导入：通过模块中的内联函数调用来分离代码 //使用webpack方式2

webpack中，实现代码分割的两种方式：

方式1、同步代码：只需要在webpack.config.js中，使用optimization.splitChunks 配置选项的配置即可。此配置方式很智能，会自动识别第三方库，并将第三方库独立打包。

方式2、异步代码（import）：异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中。异步代码实现时，由于 import() 会返回一个 promise，因此它可以和 async 函数一起使用。但是，需要使用像 Babel 这样的预处理器和 Syntax Dynamic Import Babel Plugin。此配置方式也很智能，会自动识别第三方库，并将第三方库独立打包。

所有做的一切，都是为了提高页面速度。

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。

懒加载和webpack关系不大，

懒加载，其实就是通过ES Moudle 的import异步加载模块的功能。通过es7中的异步函数 async function(){}，也可以实现懒加载。

prefetch(预取)：将来某些导航下可能需要的资源

preload(预加载)：当前导航下可能需要资源

7、css文件代码分割

它建立在新的Webpackv4功能（模块类型）之上，需要Webpack4才能工作。

这个插件应该只在没有style-loader的生产版本上使用，尤其是在您希望开发HMR的情况下。

clients（通常是浏览器）将访问该服务器以获取站点及其静态资源，最后一步可能很耗时，这就是为什么浏览器使用一种称为缓存的技术。这允许站点以更少不必要的网络流量更快地加载。

我们可以使用output.filename替换设置来定义输出文件的名称。Webpack提供了一种方法，可以使用名为substitutions的带括号字符串来模板化文件名。[ContentHash]替换将根据资产的内容添加唯一的哈希。当资产的内容更改时，[ContentHash]也将更改。

Shimming(垫片)的概念很广泛，用到的也是方方面面。

Webpack编译器可以理解作为ES2015模块、CommonJS或AMD编写的模块。但是，某些第三方库可能需要全局依赖性（例如，jquery的$）。库还可以创建需要导出的全局，在这里Shimming开始发挥作用。

（2）polyfill，浏览器中使用更高级的ES6/7的语法。

这种方式违背了webpack的模块化开发，所以，能不用就不要用。

10、环境变量的使用方法

五、webpack实战配置案例 讲解

通过npm创建一个功能的js库，上传发布至npm，供他人使用。

其实就是通过 Service Workers，当服务器宕机后，client端能够利用缓存继续访问的技术。（前提你的浏览器支持SW）

规范、方便，开发、线上环境接口配置

此配置只用在本地开发环境，发布线上环境后，需要后端人员配置左下页面路由跳转。

（2）git提交仓库之前，利用git钩子函数检测，不方便。

7、webpack性能优化（尽可能的降低打包速度）

（2）在尽可能少的模块上应用loader

（3）、Plugin尽可能精简并确保可靠

例如：dev环境下，代码压缩就可以不用。

这些选项更改模块的解析方式。Webpack提供了合理的默认值，但可以详细更改解析。查看模块分辨率，了解分解器如何工作的更多说明。

说白了，也就是导入文件时，能后通过webapck的resolve配置，减少导入模块的路径。

（5）、使用DllPlugin提供提高打包速度

（6）、控制包文件大小

（9）、结合stats分析打包结果

（10）、开发环境内存编译

（11）、开发环境无用插件剔除