webpack4的一些常用配置,只做了解学习使用
适用于单页面,以Vue为例讲解
github:https://github.com/zshsats/vueFile
使用webpack4+vue搭建的前台项目,并实现了两个小组件和栅格布局
配置包括,异步加载,打包对字体,图片的处理,剔除无用的css,压缩,复制到静态文件,.vue的解析,es6->es5配置等
喜欢的可以给个start
- 输出目录
const Home= () => import(’./modules/home/home.js’);
异步加载需要在output中配置chunkFilename
output:{
filename: 'js/[name].js', //存放的指定文件夹
chunkFilename: 'js/chunk/[name].js', //存放异步加载的文件
publicPath: '/',
path:path.resolve(__dirname,"dist")
},
2.打包输出文件名
import(/* webpackChunkName: ‘home’ */’./modules/home/home.js’)
通过webpackChunkName定义打包后的文件名
3.打包生产环境,可以为文件名加上hash串防止浏览器缓存而页面没及时更新问题
[name]-[hash].js
4.图片和字体
使用html-loader解析html中的img引入图片打包问题
{
test: /\.(html|tpl)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src', 'audio:src','link:href'],
minimize: true
}
}
}
打包图片字体到指定文件夹配置
{
test: /\.(woff|svg|eot|ttf)\??.*$/,
use:[
{
loader: 'url-loader',
options:{
limit: 8192,
name:'assets/fonts/[name].[ext]',
publicPath:"/"
}
}
]
},
{
test: /\.(png|jpg|gif|svg|ico)$/i,//正则表达式匹配图片规则
use: [
{
loader:'url-loader',
options:{
limit: 8192,
name:'[name].[ext]',//images:图片打包的文件夹;
outputPath:"assets/images",
publicPath:"/assets/images"
}
}
]
},
4.es6转es5 使用transform-runtime
“corejs”: false,配置false只会引用使用的部分,设置成2可以避免全局污染
"plugins": [
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]