一、简述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文件里面进行开发环境与生产环境的配置切换。