.use('url-loader')
.loader('file-loader')
.tap(options => Object.assign(options, {
limit: 5000,
publicPath: fontPublicPath,
name: '[name].[hash:8].[ext]'
}))
// npm run report；打印app.js的模块报告，查看各个模块；
if (processEnv === 'report') {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
// css配置处理
css: {
// 是否使用css分离插件 ExtractTextPlugin；true：页面css独立分割，false：页面css同一打包；
extract: true,
// 开启 CSS source maps（默认false）线上关闭，测试和本地开启
sourceMap: isPro ? false : true,
// css预设器配置项
loaderOptions: {
sass: {
// sass的公共方法和变量，需要预编译；
prependData: `
@import "@/assets/css/global.scss";
@import "@/assets/css/func.scss";
`
},
postcss: {
plugins: [
// 浏览器自动加前缀
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.0",
"iOS 7",
"Chrome > 31",
"ff > 31",
"ie >= 8"
] }),
] }
},
// 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: false
},
// 构建时开启多进程处理 babel 编译
parallel: require('os').cpus().length > 1,
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
},
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
9、一个基础配置较为完善的基于vue-cli3的单页面项目方案脚手架：
项目脚手架集合project-init
其中的cli-start-spa文件夹，内部readme有项目细节。
到此这篇关于vue-cli3单页构建大型项目方案的文章就介绍到这了,更多相关vue-cli3单页构建 内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
