前端框架⾯试之webpack、babel和webpack的⾯试真题
⼀、webpack 和 babel
1. 对于 webpack，分为基本配置、⾼级配置、优化打包效率、优化产出代码、构建流程概述和 babel。
2. 对于 webpack 的基本配置，拆分配置和 merge，启动本地服务，处理 ES6，处理样式，处理图⽚和模块化，代码如下所⽰：
webpackmon.js
const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
const{ srcPath, distPath }=require('./paths')
entry: path.join(srcPath,'index'),
module:{
webpack打包流程 面试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'
})
]
}
webpack.dev.js
const webpackCommonConf =require('./webpackmon.js') const{ smart }=require('webpack-merge')
const{ srcPath, distPath }=require('./paths')
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':'localhost:3000',
/
/ 将本地 /api2/xxx 代理到 localhost:3000/xxx
'/api2':{
target:'localhost:3000',
pathRewrite:{
'/api2':''
}
}
}
}
})
webpack.prod.js
const{ CleanWebpackPlugin }=require('clean-webpack-plugin')
const webpackCommonConf =require('./webpackmon.js')
const{ smart }=require('webpack-merge')
const{ srcPath, distPath }=require('./paths')
mode:'production',
output:{
filename:'bundle.[contentHash:8].js',// 打包代码时，加上 hash 戳
path: distPath,
// publicPath: 'cdn.abc'  // 修改所有静态⽂件 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: 'cdn.abc'
}
}
},
]
},
plugins:[
new CleanWebpackPlugin(),// 会默认清空 output.path ⽂件夹
new webpack.DefinePlugin({
/
/ window.ENV = 'production'
ENV:JSON.stringify('production')
})
]
})
path.js
const path =require('path')
const srcPath = path.join(__dirname,'..','src')
const distPath = path.join(__dirname,'..','dist')
srcPath,
distPath
}
3. 对于 webpack 的⾼级配置中的多⼊⼝，代码如下所⽰：
webpackmon.js
const HtmlWebpackPlugin =require('html-webpack-plugin')
const{ srcPath, distPath }=require('./paths')
entry:{
index: path.join(srcPath,'index.js'),
other: path.join(srcPath,'other.js')
},
module:{
rules:[
{
test:/\.js$/,
loader:['babel-loader'],
include: srcPath,
exclude:/node_modules/
},
// {
//    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'
// })
// 多⼊⼝ - ⽣成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath,'index.html'),
filename:'index.html',
// chunks 表⽰该页⾯要引⽤哪些 chunk （即上⾯的 index 和 other），默认全部引⽤            chunks:['in
dex']// 只引⽤ index.js
}),
// 多⼊⼝ - ⽣成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath,'other.html'),
filename:'other.html',
chunks:['other']// 只引⽤ other.js
})
]
}
webpack.dev.js
const webpack =require('webpack')
const webpackCommonConf =require('./webpackmon.js') const{ smart }=require('webpack-merge')
const{ srcPath, distPath }=require('./paths')
mode:'development',
module:{
rules:[
// 直接引⼊图⽚ url
{
test:/\.(png|jpg|jpeg|gif)$/,
use:'file-loader'
}
]
},
plugins:[
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV:JSON.stringify('development')
})
],
devServer:{
port:8080,
progress:true,// 显⽰打包的进度条
contentBase: distPath,// 根⽬录
open:true,// ⾃动打开浏览器
compress:true,// 启动 gzip 压缩
// 设置代理
proxy:{
// 将本地 /api/xxx 代理到 localhost:3000/api/xxx
'/api':'localhost:3000',
// 将本地 /api2/xxx 代理到 localhost:3000/xxx
'/api2':{
target:'localhost:3000',
pathRewrite:{
'/api2':''
}
}
}
}
})
webpack.prod.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。