第一步我们很简单,就利用vue-loader和babel-loader是把.vue文件打包出来,总共才40多行代码,看构建/webpack.base.conf.js文件注释就看的懂。+ + +表示有省略的代码
模块。出口={
+++//模块,加载程序
模块:{
规则:[
{
测试:/\ .vue/美元,
装载机:“vue-loader”,
排除:/node_modules/,
包括:解决(src)
},
{
测试:/\ . js/美元,
装载机:“babel-loader”,
排除:/node_modules/,
包括:解决(src)
}
]
}
+++
}
之前
运行<代码> webpack——配置构建/webpack.base.conf.js
这里打包css以萨斯为例,用到了<代码> mini-css-extract-plugin> url-loader>
+++
模块。出口={
+++//模块,加载程序
模块:{
规则:[
+++
{
测试:/\ s # 63; css/美元,
用途:[
MiniCssExtractPlugin.loader,
“css-loader”,
“sass-loader”
]
},
{
测试:/(png | jpe # 63; g | gif | svg)(\ & # 63;。*) & # 63;美元/,
装载机:“url-loader”,
选择:{
限制:10000
名称:“静态/img/[名字]。[散列:7]。[ext]”
}
}
+++
]
},//插件
插件:[
+++
新MiniCssExtractPlugin ({
文件名:“静态/css/[名字]。(哈希). css”,
chunkFilename:“静态/css/[名字]。(哈希). css”
})
]
}
之前
运行<代码> webpack——配置构建/webpack.base.conf.js
通过构建/config.js来设置开发配置。如下注释
const path=要求(“路径”)
模块。出口={
戴夫:{
assetsSubDirectory:“静态”,//静态文件目录
assetsPublicPath: '/',//相对文件路径
proxyTable: {},
主持人:“localhost”,
端口:“8000”,
autoOpenBrowser:假的,//是否自动打开浏览器
errorOverlay:真的,//浏览器错误提示遮罩层
notifyOnErrors:真的,//编译错误的时候通知提示,需要friendly-errors-webpack-plugin配合
调查:假的,
useEslint:真的,//便宜使用eslint-loader模块
showEslintErrorsInOverlay:假的,//eslint浏览器错误提示遮罩层
devtool: ' cheap-module-eval-source-map ',//源地图
cssSourceMap:真的,//css源地图
cacheBusting:假的,//vue debugg提示
}
}
之前
在<代码> webpack.dev.conf.js> webpack-dev-server> postcss-loader
运行<代码> npm运行dev> 纱dev>
通过<代码>构建/config.js>
const path=要求(“路径”)
模块。出口={
+++
构建:{//html模板
指数:路径。解决(__dirname . ./dist/index . html),//路径
assetsRoot:路径。解决(__dirname“. ./dist”),
assetsSubDirectory:“静态”,
assetsPublicPath: '/',//生产环境的源地图
productionSourceMap:假的,
devtool:“#源图”,//开启静态文件的Gzip压缩//如果是真正的话需要npm安装——save-dev compression-webpack-plugin
productionGzip:假的,
productionGzipExtensions:“js”、“css”,//打包完成显示包大小的状态分析//皀pm运行构建,报告”
bundleAnalyzerReport: process.env.npm_config_report
}
}
之前
运行<代码> npm运行构建> 纱构建>
