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架构)