前端-webpack-合集

21、你对Webpack的认识？

webpack是收把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

22、webpack中的entry是做什么的？

entry: 用来写入口文件，它将是整个依赖关系的根。当我们需要多个入口文件的时候，可以把entry写成一个对象。
var baseConfig = {
entry: {
main: ‘./src/index.js’
}
}

23、webpack中的output是做什么的？

output: 即使入口文件有多个，但是只有一个输出配置，如果你定义的入口文件有多个，那么我们需要使用占位符来确保输出文件的唯一性。

 var baseConfig = {
        entry: {
            main: './src/index.js'
        },
        output: {
            filename: '[name].js',
            path: path.resolve('./build')
        }
    }
module.exports = baseConfig

24、webpack中的Loader的作用是什么？

1、实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js
2、转换这些文件，从而使其能够被添加到依赖图中
这里介绍几个常用的loader：
babel-loader： 让下一代的js文件转换成现代浏览器能够

支持的JS文件。
babel有些复杂，所以大多数都会新建一个.babelrc进行配置
css-loader,style-loader:两个建议配合使用，用来解析css文件，能够解释@import,url()如果需要解析less就在后面加一个less-loader
file-loader: 生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时，可以返回一个DataURL事实上，在使用less,scss,stylus这些的时候，npm会提示你差什么插件，差什么，你就安上就行了

25、webpack中的Plugins的作用是什么？

loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，它直接对整个构建过程起作用
1、ExtractTextWebpackPlugin: 它会将入口中引用css文件，都打包都独立的css文件中，而不是内嵌在js打包文件中。
2、HtmlWebpackPlugin:依据一个简单的index.html模版，生成一个自动引用你打包后的js文件的新index.html。
3、HotModuleReplacementPlugin: 它允许你在修改组件代码时，自动刷新实时预览修改后的结果注意永远不要在生产环境中使用HMR。

26、webpack中什么是bundle,什么是chunk,什么是module?

1、bundle是由webpack打包出来的文件，
2、chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。
3、module是开发中的单个模块。
4、chunk 打包后变成bundle.

27、webpack-dev-server和http服务器如nginx有什么区别？

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更加有效。

28、什么是模块热更新？

模块热更新，是webpack的一个功能，他可以使得代码通过修改过后，不用刷新浏览器就可以更新。是高级版的自动刷新浏览器

。

29、什么是长缓存？在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。在webpack中，可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码，通过NamedModulesPlugin或者HashedModulesIdsPlugin使再次打包文件名不变。

前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）