沈阳思路网站制作,对seo的理解,秦皇岛优化seo,网站建设公司 优势该内容主要整理关于 前端工程相关模块的相关面试题#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 前端工程相关模块精选篇 1. webpack的基本配置2. webpack高级配置3. webpack性能优化-构建速度4. webpack性能优化-产出代码#xff08;线上运行其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 前端工程相关模块精选篇 1. webpack的基本配置2. webpack高级配置3. webpack性能优化-构建速度4. webpack性能优化-产出代码线上运行5. webpack原理简述6. webpack热更新原理7. webpack Loader8. webpack Plugin9. webpack编译优化10. webpack import()原理11. webpack有哪几种文件指纹12. webpack中如何处理图片的13. webpack常用插件总结14. 抽象语法树AST15. Babel环境搭建和基本配置16. 使用babel-loader会有哪些问题可以怎样优化17. Babel 原理18. Babel是如何编译Class的19. Babel Polyfill是什么20. Babel Runtime21. Tree Shaking原理是什么22. Vite了解吗23. 面试真题 1. webpack的基本配置
基于 webpack4
// webpack.common.js
const path require(path)
const HtmlWebpackPlugin require(html-webpack-plugin)
const { srcPath, distPath } require(./paths)module.exports {entry: path.join(srcPath, index),module: {rules: [{test: /\.js$/,loader: [babel-loader],include: srcPath,exclude: /node_modules/},// {// test: /\.vue$/,// loader: [vue-loader],// include: srcPath// },// {// test: /\.css$/,// // loader 的执行顺序是从后往前知识点// loader: [style-loader, css-loader]// },{test: /\.css$/,// loader 的执行顺序是从后往前loader: [style-loader, css-loader, postcss-loader] // 加了 postcss},{test: /\.less$/,// 增加 less-loader 注意顺序loader: [style-loader, css-loader, less-loader]}]},plugins: [new HtmlWebpackPlugin({template: path.join(srcPath, index.html),filename: index.html})]
}// paths.js
/*** description 常用文件夹路径*/const path require(path)const srcPath path.join(__dirname, .., src)
const distPath path.join(__dirname, .., dist)module.exports {srcPath,distPath
}// webpack.dev.jsconst path require(path)
const webpack require(webpack)
const webpackCommonConf require(./webpack.common.js)
const { smart } require(webpack-merge)
const { srcPath, distPath } require(./paths)module.exports smart(webpackCommonConf, {mode: development,module: {rules: [// 直接引入图片 url{test: /\.(png|jpg|jpeg|gif)$/,use: file-loader}]},plugins: [new webpack.DefinePlugin({// window.ENV developmentENV: JSON.stringify(development)})],devServer: {port: 8080,progress: true, // 显示打包的进度条contentBase: distPath, // 根目录open: true, // 自动打开浏览器compress: true, // 启动 gzip 压缩// 设置代理proxy: {// 将本地 /api/xxx 代理到 localhost:3000/api/xxx/api: http://localhost:3000,// 将本地 /api2/xxx 代理到 localhost:3000/xxx/api2: {target: http://localhost:3000,pathRewrite: {/api2: }}}}
})// webpack.prod.jsconst path require(path)
const webpack require(webpack)
const { CleanWebpackPlugin } require(clean-webpack-plugin)
const webpackCommonConf require(./webpack.common.js)
const { smart } require(webpack-merge)
const { srcPath, distPath } require(./paths)module.exports smart(webpackCommonConf, {mode: production,output: {filename: bundle.[contentHash:8].js, // 打包代码时加上 hash 戳path: distPath,// publicPath: http://cdn.abc.com // 修改所有静态文件 url 的前缀如 cdn 域名这里暂时用不到},module: {rules: [// 图片 - 考虑 base64 编码的情况{test: /\.(png|jpg|jpeg|gif)$/,use: {loader: url-loader,options: {// 小于 5kb 的图片用 base64 格式产出// 否则依然延用 file-loader 的形式产出 url 格式limit: 5 * 1024,// 打包到 img 目录下outputPath: /img1/,// 设置图片的 cdn 地址也可以统一在外面的 output 中设置那将作用于所有静态资源// publicPath: http://cdn.abc.com}}},]},plugins: [new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹new webpack.DefinePlugin({// window.ENV productionENV: JSON.stringify(production)})]
})2. webpack高级配置
配置多入口打包抽离CSS文件抽离公共代码splitChunks避免多次打包
3. webpack性能优化-构建速度
优化babel-loaderIgnorePluginnoParsehappyPackparallelUglifyPlugin自动刷新热更新优化打包速度完整代码DllPlugin 动态链接库
4. webpack性能优化-产出代码线上运行
5. webpack原理简述
1.1 核心概念1.2 工作流程 (加载 - 编译 - 输出)1.3 模块包装1.4 webpack的打包原理1.5 webpack的打包原理详细1.6 总结
6. webpack热更新原理
7. webpack Loader
8. webpack Plugin
实现一个编译结束退出命令的插件
9. webpack编译优化
优化webpack打包速度
10. webpack import()原理
动态导入原理webpack中如何实现动态导入
11. webpack有哪几种文件指纹
12. webpack中如何处理图片的
13. webpack常用插件总结
14. 抽象语法树AST
15. Babel环境搭建和基本配置
16. 使用babel-loader会有哪些问题可以怎样优化
17. Babel 原理
18. Babel是如何编译Class的
19. Babel Polyfill是什么
20. Babel Runtime
21. Tree Shaking原理是什么
对tree-shaking的了解原理
22. Vite了解吗
Vite 特点Vite 为什么启动非常快手写实现
23. 面试真题
前端为何打包和构建module chunk bundle区别loader和plugin区别babel和webpack的区别babel-polyfill和babel-runtime的区别webpack如何实现懒加载为何proxy不能被polyfillwebpack优化优化构建速度优化产出代码
