前端随心记---------webpack管理工具

Posted 2020-11-30 hudunyu

webpack：

官网：https://www.webpackjs.com/

 　　由来：

　　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是基于整个项目进行构建的。