webpack:
由来:
1.开发的时候,我们写的代码是有注释,有空格(文件比较大)在开发环境中注释有意义的,但是在生产环境中,注释是没有意义的。代码应该是尽可能压缩的足够小(网络请求)如果我们没有借助一些其他工具的时候,我们需要手工的把 xxx.js 转换 xxx.mini.js 文件。(文件美化)
2.我们的js在发展的过程中,出现很多的新特性,例如 es6 箭头函数、class 语法糖,Promise等。这些新的特性在不做处理的时候是很难在低版本的浏览器适应。尝试做转换,手工的转换 在线转换工具。(js兼容性)
3.我们的css开发,在发展过程中,也出现一些预处理的css,例如 less sass stylus等....这些预处理的css 写起来非常的方便,但是这些预处理的文件浏览器默认是不支持的,则我们需要做转换,可以借助一些在线转换工具转换成 css 文件。(css预处理)
概念:
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack是前端的一个项目构建工具,它是基于Node.js开发出来的一个前端工具。
安装webpack的两种方式:
1.全局安装:运行“npm install webpack -g”,这可以在全局中使用webpack命令
2.局部安装:运行 “npm install webpack --save-dev” 安装到项目依赖中。
webpack默认只能打包处理JS类型的文件,无法处理其他的非JS类型的文件,
如果要处理非JS类型文件,我们需要手动安装一些合适第三方loader 加载器
如果要打包处理css文件,需要安装“cnpm install style-loader css-loader -D”,再打开
webpack常用的loaders和plugins?(面试题)
最基本的css处理loader是css-loader,style-loader,(css-loader 处理的是css 中的@import 和url, 根据路径(相对路径)找到相应的资源,但它不处理具体的资源,style-loader则是把打包后的css文件插入到html中。)
处理图片主要用到两个loader: url-loader style-loader. url-loader的作用是把图片转化成base64编码的字符串,然后内嵌到到js文件中。 file-loader 则是把图片打包成一个个单独的图片文件,并返回它们的路径。
https://www.cnblogs.com/SamWeb/p/10069922.html
loaders和plugins的区别是?(面试题)
主要区别
loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。从字面意思也能看出,loader是用于加载的,它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack,扩展了它的功能。当然loader也时变相的扩展了 webpack ,但是它只专注于转化文件(transform)这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。
前文提到Gulp管理工具,使用Gulp,是基于task任务的,使用webpack是基于整个项目进行构建的。
原文地址:https://www.cnblogs.com/hudunyu/p/11691852.html