一、简述webpack的核心原理
(1)一切皆模块
正如JS文件可以是一个"模块"一样,其它的文件也可视作模块。因此可以执行require(myJsFile.js),亦可执行require(myCssFile.css),这意味着我们可以将事物分割成更小的、易于管理的片段,从而达到重复利用的目的。
(2)按需加载
传统的模块打包工具最终将所有的模块编译并生成一个庞大的bundle.js文件。但是,在真实的APP里,bundle.js文件的大小在10M-15M之间的话,可能会导致应用一直处于加载状态。因此,webpack使用许多特性来分割代码,然后生成多个bundle.js文件,而且异步加载部分代码用于实现按需加载。
二、webpack打包流程
具体流程如下:
- 通过entry配置入口文件;
- 通过output制定输出文件;
- 使用各种loader处理CSS、JavaScript、image等资源,并将它们编译与打包成浏览器可以解析的内容等。
三、webpack中的loader
- 具体作用:
(1)实现对不同格式文件的处理,比如将scss转换为css,或将TypeScript转化为JavaScript;
(2)可以编译文件,从而使其能够添加到依赖关系中。loader是webpack最重要的部分之一。通过使用不同的loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理,loader需要在webpack.config.js里单独用module进行配置。
- 叙述工作中常用的loader
babel-loader:将下一代的JS语法规范转换成现代浏览器能够支持的语法规范。因为babel有些复杂,所以大多数开发者都会新建一个.babelrc进行配置。
css-loader、style-loader:这两个建议配合使用,用来解析css文件依赖。
less-loader、sass-loader:分别用来解析less文件,sass文件。
file-loader:生成的文件名就是文件内容的MD5散列值,并会保留所引用资源的原始扩展名。
url-loader:功能类似于file-loader,但是当文件大小低于指定的限制时,可以返回一个DateUrl。
四、简述webpack的plugins和loaders有什么区别
(1)作用不同
- loader直译为「加载器」,作用是让webpack拥有加载和解析非JS文件的能力,是用来加载文件的。
- plugin直译为「插件」,可以拓展webpack的功能,让webpack具有更多的灵活性。在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。
(2)用法不同
- loader在module.rules中配置,也就是说他作为模块的解析规则存在,类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件,使用什么加载和使用的参数。
- plugin在plugins中单独配置。类型为数组,每一项事宜额plugin的实例,参数都通过构造函数传入。
(3)常见的loader和plugin
- 常见的loader:
样式:style-loader、css-loader、less-loader、sass-loader等;
文件:raw-loader、file-loader 、url-loader等可以处理资源;
编译:babel-loader(把 ES6 转换成 ES5)、coffee-loader 、ts-loader等;
vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言;
- 常见的plugin:
内置UglifyJsPlugin:压缩代码,通过UglifyES压缩ES6代码;
内置CommonsChunkPlugin:提取公共代码,提高打包效率,将第三方库和业务代码分开打包;
ProvidePlugin:自动加载模块,代替require和import;
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
html-webpack-plugin:可以根据模板自动生成html代码,并自动引用css和js文件;
extract-text-webpack-plugin:将js文件中引用的样式单独抽离成css文件;
HotModuleReplacementPlugin:热更新插件,修改代码后,自动刷新,实时预览修改后的效果。
五、webpack如何切换开发环境和生产环境
生产环境与开发环境的区别无非就是调用的接口地址、资源存放路径、线上的资源是否需要压缩等方面。目前的做法是在package.json中设置node的一个全局变量,然后在webpack.config.js文件里面进行开发环境与生产环境的配置切换。