? ? ? ? 最后，webpack中含有很多丰富的插件（包括 official plugins 和 no official plugins）,这些插件可以进行预处理、源码的多端适配、代码压缩、CDN缓存、模块开发等，那么具体有哪些插件、插件怎么去使用，博主会在接下来的几篇webpack专题中详细介绍，请各位小伙伴持续关注哦；

2、webpack 与其他打包工具有何区别、优势呢？

????????除了以上提到的优势，还有以下几点：

1）webpack支持多模块标准：处理好不同类型的模块之间的依赖关系；

2）webpack具有完备的代码分割解决方案：对于分割打包后的资源，按优先级顺序加载，按需加载，首屏只需要加载必要部分；

3）webpack可以处理各种类型的资源：模板、图片、样式、文件资源等等；

????????在博主看来还应该有一点：

4）webpack具有完备的（资源依赖）逻辑体系 --> 便于梳理项目结构。

3、Webpack4 和 Webpack3的区别：

1）增加了mode属性：

????????对于不同的模式，那么针对体验的注重点也是不同的；

? ? ? ? --> 开发模式 development：

????????????????mode: development 注重开发阶段的体验；

? ? ? ? wp对开发模式提供的特性：

【1】浏览器调试工具?

【2】注释、开发阶段的详细错误日志和提示

【3】快速和优化的增量构建机制

? ? ? ? --> 线上模式 production

????????????????mode: production 专注于项目的部署

????????wp对线上模式提供的特性：

【1】开启所有的优化代码

【2】更小的bundle大小

【3】去除掉只在开发阶段运行的代码

2）webpack在loader，optimize上进行了很多改动：

module.loaders 改为 module.rules
module.loaders.loader 改成 module.loaders.use
loader的”-loader”均不可省略

3）插件优化

webpack4 删除了合并相同的文件CommonsChunkPlugin插件，
它使用内置API optimization.splitChunks 和 optimization.runtimeChunk，
这意味着webpack会默认为你生成共享的代码块。

其它插件变化如下:
   NoEmitOnErrorsPlugin 废弃，使用optimization.noEmitOnErrors替代，在生产环境中默认开启该插件。
   ModuleConcatenationPlugin 废弃，使用optimization.concatenateModules替代，在生产环境默认开启该插件。
   NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境默认开启。
   uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。

二、从零开始构建你自己的开发环境

1、webpack与webpack-cli的安装：

windows平台：?

????????利用 npm 全局安装 webpack 4 版本、webpack-cli 4 版本，

????????npm install webpack webpack-cli -g

Mac平台：

????????利用 npm 全局安装 webpack 4 版本、webpack-cli 4 版本，?

? ? ? ? yarn 安装：yarn global?add?webpack webpack-cli

全局安装后，项目中安装是本地局部安装：

全局安装后，npm安装时会自动从本地调用，会加快安装的速度，但是也有缺点：计算机的内存空间是比较宝贵的、所以电脑中如果做的项目多需要安装的环境较多，在本地全局安装后，会占用较多内存，推荐不要全局安装，小伙伴们也可以直接选择项目中安装（即本地局部安装）。【npm】

由于npm的服务器在国外，安装时会很浪费时间；国内的淘宝镜像服务器也可以使用，不过存在一些未知的不能兼容问题、又或是莫名其妙报错。【不推荐使用 cnpm】

以上各位小伙伴可以根据自己的喜好，自行选择，读者就不在此继续啰嗦了！

2、正式开始今天的小项目：

Step 01：初始化项目，生成 package.json 文件：

????????npm init，一路回车 Enter? ? ? ??

直到你的项目文件夹下出现这个文件就说明成功了。?

Step 02：局部安装webpack和初始配置webpack

windows: npm install?webpack webpack-cli --save-dev

Mac: yarn add webpack webpack-cli webpack-dev-server --dev

?cmd命令提示符面板运行以上命令后：

package.json文件夹下的devDependences里面就会出现刚刚安装的信息：

在source根目录下新建一个开发环境资源文件夹 src，用于存放一些开始所要用到的资源文件，

在src下面新建一个JS文件 index.js，输入console.log(hello world)，

其次，在cmd中执行webpack?src/index.js --output?dist/index.js，进行文件的打包输出。

?执行完上面的命令后，如果看到下图这样的结果，那么要恭喜你，Webpack的安装已经成功，你可以在你的命令终端执行有关于Webpack相关的命令：

图中的Warnning警告稍后会讲到，回到项目中，会发现项目根目下自动创建了一个/dist目录，而且该目录下包含了一个index.js文件：

执行完上面的命令之后，可以看到有相关的警告信息。
那是因为Webpack4增加了mode属性，用来表示不同的环境。
mode模式具有development，production 和 none三个值，其默认值是production 。也就是说，在执行上面的命令的时候，我们可以带上相应的mode属性的值，
比如说，设置none来禁用任何默认行为

?此时，我们对刚才的命令后面追加 --mode none，来设定打包时不采用任何模式。

执行后结果如何呢？请看下面：