webpack是什么？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。
chunk 代码块，bundle静态资源。

- 上面是比较官方的说法，那么什么是静态模块打包器？

Vue开发就是在一个文件中引入这个文件需要的所有资源，比如：样式资源，js资源，图片，字体等资源……，那么这些资源都要交给构建工具处理，我们首先告诉webpack一个入口文件，他会以这个入口文件作为起点文件打包，将每一个依赖都会记录好，形成树状依赖图。依次将资源引进来，进行编译打包生成静态资源。
如图：图片自己画的有点难看，请忽略颜值

什么又是构建工具呢？

我们使用ES6+来开发项目，使用less/sass/stylus等css预处理器来写样式，这些语法浏览器都无法识别，只能通过一个个小工具来翻译为浏览器能识别的语言，而这些小工具我们需要一个个来维护，很麻烦，所以提出了找一个大的工具，将这些小的工具的功能都包含起来，我们只要关心这个大的工具怎么使用就OK了。就是构建工具。
那webpack的主要工作都有什么呢？开发环境和生产环境的配置都有什么不同呢？

1. 开发模式工作：

1）源代码（包含ES6语法，less/sass文件）——> webpack ——> bundle文件，被浏览器运行。
2）自动化工作，自动打开浏览器，自动编译，自动刷新等，让开发效率更高。

2. 生产环境工作：

1） css—>js导致js文件很大，需要从js中提取出来。
2）对代码进行压缩
3）样式和部分js代码有兼容性问题，比如：样式的css3针对不同浏览器加前缀等
4）代码更快，性能更好，更平稳的运行

这些如果放到开发环境中，运行会很慢，不利于开发。

总结：

webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
不能编译打包 css、img 等文件
在webpack看来一切都是模块，包括javascript代码，css和fonts以及图片等等，只有通过合适的loaders，都可以被当作模块处理。并且webpack提供了拆分代码后异步加载的方式，即先加载某个主模块，以后按需加载。
消除对未引用资源的依赖。
dev-server：自动打开浏览器，实现代码的热编译。

webpack是什么？相关推荐

第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...

webpack是什么？

webpack是什么？相关推荐

最新文章

热门文章