webpack入门（1）基本概念与入门使用

部分来自webpack官网整理，网易云课堂笔记，博文：https://www.cnblogs.com/-walker/p/6056529.html

最近在一些招聘信息中有看到一些企业要求会使用webpack，于是简单学习了下

为什么要用webpack

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

当你打开一些网页查看其源码，发现其只引用了一个js，没有其他非常杂乱的的css，js。但又不影响速度，是不是很爽。早就被前端，乱七八糟的引用烦透了，那就试试webpack吧

webpack做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

这是官方给出的部分打包器对比。

所以使用webpack到底有哪些优点？

在webpack看来资源一切都是模块，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。

1、CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

需要分别安装：npm install --save-dev style-loader css-loader

2、CSS modules

在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都非常困难和复杂。

最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下

这样相同的类名也不会互相污染

3、CSS预编译

Sass 和 Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders

a:less-loader

b:sass-loader

c:stylus-loader

还有一个CSS处理平台-PostCSS，可以让你用CSS事先更多功能，比如如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer

并在webpack配置文件中进行设置，只需要新建一个postcss关键字，并在里面申明依赖的插件，如下，现在你写的css会自动根据Can i use里的数据添加不同前缀了。

webpack入门使用 -基本打包演示-

将webpack安装成全局包

npm install webpack -g //cmd使用npm下载webpack包

npm表示npmjs.com这个网站，npm存储了很多nodejs第三方的功能包，上面命令指的是从npm下载webpack

只要安装好nodejs就会自动安装好npm这个包

如何安装nodejs？

登陆nodejs.org

点击下载，完成双击安装，一路next，直到Finish

cmd面板输入 npm -v 得到版本号说明安装完成

cmd输入npm install webpack -g 获取webpack包

完成后cmd输入webpack

命令没有执行，提示我们安装一个命令行工具，或 webpack-cli，或 webpack-command，这是因为 webpack 4 里将命令行相关代码迁移出去了。这里我选择 webpack-command

cmd输入webpack有帮助信息，说明获取成功。

注意！！

由于npm工具很多会自动查找国外的网站包，可能被防火墙拦截下来报错，所以换一个国内的下载源

解决方案：安装淘宝的cnpm包来替代npm去安装包

cmd中安装cnpm命令 npm install cnpm -g

接下来可以利用cnpm install webpack -g来替代 npm install webpack -g

cnpm install ***  -g  //安装
cnpm uninstall ***  -g  //卸载
//后面那个-g代表全局的意思
cnpm init//自动生成package.json文件

实例演示基本使用

https://www.webpackjs.com/guides/getting-started/#基本安装

如我前面所讲按照教程进行使用过程中遇到所有开头是npm的cmd命令，如果报错记得将npm改成cnpm，下面同样适用！

/*本已经写好我自己的入门过程，结果发现自己bug太多，还是官方靠谱一点*/

按照入门已完成的文档结构

package.json是webpack的配置文件

如果你想要了解 package.json 内在机制的更多信息，我们推荐阅读 npm 文档。

入门完成-如何进行资源管理和其他基本功能的尝鲜

如果你是从开始一直遵循着指南的示例，现在会有一个小项目，显示 "Hello webpack"。现在我们尝试整合一些其他资源，比如图像，看看 webpack 如何处理。

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于 JavaScript 模块，但是，像 webpack 这样的工具，将动态打包(dynamically bundle)所有依赖项（创建所谓的依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以_明确表述它自身的依赖，我们将避免打包未使用的模块。

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了这个设置过程。

资源管理

如何进行资源管理和其他基本功能的尝鲜，还是按照官方文档走，

https://www.webpackjs.com/guides/asset-management/

总结：

文档清晰，打包完，查看源码较为简洁，加载图片名称变为复杂的字符串，加密性好。
但整体适用比较适合大型的前端项目收尾阶段。
如果像我的博客每周更新后都这么处理一次？？开玩笑，但比较适合几个月更新一次的稳定版，
对于开源的项目，还是要放出打包前的源码的，webpack对投入运行，较为成熟的软件开发有巨大的左右，一般玩玩还是算了，大概了解下就可以，以后对自己一些稳定版的软件可以进行类似打包