★webpack的作用是什么
webpack的作用其实有以下几点：
-
模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
-
编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过
webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。 -
能力扩展。通过
webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。
vue-cli 基于 webpack 构建，并带有合理的默认配置；
★webpack规范
快速掌握 Webpack 面试题
★ （一）拆分配置、合并配置
建三个配置文件，一个是开发特有的，一个是生产环境特有的，一个是开发和生产环境公共的，然后通过webpack-merge进行合并配置
- webpack.base.config.js // 公共配置
- webpack.dev.config.js // 开发环境
- webpack.prod.config.js // 生产环境
// 模式 通过选择 `development`, `production` 或 `none` 之中的一个，来设置 `mode` 参数，
// 你可以启用 webpack 内置在相应环境下的优化。其默认值为 `production`。
mode: 'production' //代码会压缩
★ （二）如何使用 webpack-dev-server 【页面自动更新】
开发环境的配置
// package.json
"scripts":{
"dev":"webpack-dev-server --config ./build/webpack.dev.config.js"
"build:dev":"webpack-dev-server --config ./build/webpack.dev.config.js"
}
// webpack.dev.config.js 接口转发
proxy:{
'api':{
target:'http://xxx.ccc.co',
changeOrigin:true, // 设置成true：发送请求头中host会设置成target
pathRewrite:{
'^api':''
}
}
}
★ （三）如何处理样式
module:{
rules:[
{
test: /\.css$/,
loader:[
'style-loader', // 样式插入style标签
'css-loader', // 处理css文件之间的引用关系
'postcss-loader' // 处理css兼容性，写一个样式会自动加上前缀，-webkit-等，
//依赖autoPrefixer插件，最外层有postcss.config.js,
'sass-loader', // 处理sass代码
]
}
]
}
// postcss.config.js
plugins: [
require('autoprefixer')
]
// package.json
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
★ （四）处理图片
module:{
rules:[
{
test: /\.(png.|jpg)$/,
use:{
loader:'url-loader',
options:{
limit:5*1024 // 小于5kb的使用base64，减少http请求，提高首次渲染速度
outputPath: '/img/' //大的图片，大于5kb的，打包进img文件夹
}
}
//loader:[
// 'file-loader', //打包进dist目录
//]
}
]
}
★ （五)多入口
- 多 entry
- 多 output
- 多 HtmlWebpackPlugin
entry:{
index:'./src/index.html',
other:'./src/other.html'
}
output:{
filename:'[name].js', // name占位符
path:...
}
plugins:[
new HtmlWebpackPlugin ({
template:'./src/index.html',
fileName:'index.html',
chunks:['index'] // html使用的js文件
})
new HtmlWebpackPlugin ({
template:'./src/other.html',
fileName:'other.html',
chunks:['other']
})
]
★ （六)抽离CSS
MiniCSSExtractPlugin: css代码单独打包到css文件，使用link引入，而不是打包到html的style标签里
plugins:[
new MiniCSSExtractPlugin({
filename:'css/main.[contentHash:8].css'
})
]
optimization:{
minimizer:[
//压缩JS
new TerserPlugin();
//压缩CSS
new OptimizeCssAssetsWebpackPlugin()
]
}
// 生产环境配置
rules:[
{
test: /\.css$/,
loader:[
'MiniCSSExtractPlugin.loader', //
'css-loader', // 处理css文件之间的引用关系
'postcss-loader' // 处理css兼容性，写一个样式会自动加上前缀，-webkit-等，
//依赖autoPrefixer插件，最外层有postcss.config.js,
'sass-loader', // 处理sass代码
]
}
]
★ （七)抽离公共代码
-
公共模块：
公共模块的代码不需要重复打包，单独抽离成一个公共模块的文件，然后引用即可
-
第三方模块
第三方模块的代码一般不会改变，不需要再页面代码改变之后重新打包，一般单独抽离出一个三方模块的文件，然后引用即可
new HtmlWebpackPlugin ({
template:'./src/other.html',
fileName:'other.html',
chunks:['other','common'] // html使用的js文件
})
optimization:{
//代码分割,针对同步异步，
splitChunks:{
chunks:all,// `all`，`async` 和 `initial`
chacheGroups:{
vendor:{
name:'vendor'//每个组的名字，
priority:1, // 优先级
test:'node_modules'//来自node_modules里面的打包进入vender，否则进入下面其他
minSize:5*1024, 进行代码分割的界限，大于5kb，才进行代码分割
minChunks:1,//引入几次以上单独打包
},
common:{
name:'common'//每个组的名字，
priority:0, // 优先级
minSize:5*1024, 进行代码分割的界限，大于5kb，才进行代码分割
minChunks:2,//引入2次以上单独打包
}
}
}
}
