当前位置：首页 > news >正文

米定制网的网站是那个公司做宁波seo在线优化公司

news 2025/8/10 20:01:41

米定制网的网站是那个公司做,宁波seo在线优化公司,北京营销型网站建设价格,怎样免费建设免费网站该内容主要整理关于前端工程相关模块的相关面试题，其他内容面试题请移步至「最新最全的前端面试题集锦」查看。前端工程相关模块精选篇 1. webpack的基本配置2. webpack高级配置3. webpack性能优化-构建速度4. webpack性能优化-产出代码（线上运行&am…

该内容主要整理关于前端工程相关模块的相关面试题，其他内容面试题请移步至「最新最全的前端面试题集锦」查看。

前端工程相关模块精选篇

1. webpack的基本配置
2. webpack高级配置
3. webpack性能优化-构建速度
4. webpack性能优化-产出代码（线上运行）
5. webpack原理简述
6. webpack热更新原理
7. webpack Loader
8. webpack Plugin
9. webpack编译优化
10. webpack import()原理
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原理是什么
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 = 'development'ENV: 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 = 'production'ENV: JSON.stringify('production')})]
})