什么是WebPack，为何要使用它？

时间 2019-11-06 标签什么 webpack 为何使用

注：1、摘要说明(会不按期更新)：

A：这里是webpack1.0+，2.0+请移步这里(已经配置好的简单脚手架) https://github.com/wjf444128852/dev-webpackcss

B：webpack2.0+案例：1 豆瓣热映电影html

C：react+webpack3.0+(开发和生产环境分离的脚手架，建议了解其余以后再参考，欢迎clone,issuse,扩展使用,本来配置参考dev分支) https://github.com/wjf444128852/react-webpack前端

其余：React DEMOreact

1：方形宫格抽奖：在线体验抽奖源码地址：戳我webpack

2：简易后台管理系统：在线体验(密码随意) 源码地址：戳我git

2、官方参考github

D：webpack中文网站 https://doc.webpack-china.org/web

E：webpack英文网站 https://webpack.js.org/concepts/sql

正文从下面开始.................npm

一、什么是Webpack

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

二、为什要使用WebPack

今的不少网页其实能够看作是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了不少好的实践方法

a:模块化，让咱们能够把复杂的程序细化为小的文件;

b:相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能能装换为JavaScript文件使浏览器能够识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提升了咱们的开发效率，可是利用它们开发的文件每每须要进行额外的处理才能让浏览器识别,而手动处理又是很是繁琐的，这就为WebPack类的工具的出现提供了需求。

三、WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并无太多的可比性，Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack能够替代Gulp/Grunt类的工具。

Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，这个工具以后能够自动替你完成这些任务。

Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

优势：模块化

在webpack看来一切都是模块！这就是它不可不说的优势，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有经过合适的loaders，它们均可以被当作模块被处理。

一、CSS

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

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

二、CSS modules

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

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

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

三、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里的数据添加不一样前缀了。

2、webpack-pulgins

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程当中生效，执行相关的任务。
Loaders和Plugins经常被弄混，可是他们实际上是彻底不一样的东西，能够这么来讲，loaders是在打包构建过程当中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操做单个文件，它直接对整个构建过程其做用。

Webpack有不少内置插件，同时也有不少第三方插件，可让咱们完成更加丰富的功能。

一、如何使用插件？

该插件的做用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不一样的哈希值。

//安装

npm install --save-dev html-webpack-pugin

未完.