//引入webpack
// const webpack = require('webpack');
const path = require('path');
// const { config } = require('process');
// const resolve = dir => path.resolve(__dirname, dir)
// const Version = new Date().getTime(); //当前时间为了防止打包缓存不刷新,所以给每个js文件都加一个时间戳
module.exports = {
// 显式转义依赖
// transpileDependencies: ['webpack-dev-server/client'],
//基本路径
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
// assetsDir: 'static',
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
// outputDir: "dist",
// 输出文件
outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
productionSourceMap: false,
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
// indexPath: 'index.html',
// 是否在保存时检查
lintOnSave: true,
configureWebpack:(config) => {
config.resolve = { //配置解析别名
extensions: ['.js','.json','.vue'],//自动添加文佳名后缀
alias: {
'@':path.resolve(__dirname,'./src'),
'public': path.resolve(__dirname,'public'),
'components': path.resolve(__dirname,'./src/components'),
'common': path.resolve(__dirname,'./src/common'),
'api': path.resolve(__dirname,'./src/api'),
'data': path.resolve(__dirname,'./src/data'),
}
}
// performance: {
// hints: 'warning',
// //入口起点的最大体积 整数类型(以字节为单位)
// maxEntrypointSize: 50000000,
// //生成文件的最大体积 整数类型(以字节为单位 300k)
// maxAssetSize: 30000000,
// //只给出 js 文件的性能提示
// assetFilter: function (assetFilename) {
// return assetFilename.endsWith('.js');
// }
// },
// output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
// // publicPath: './',
// // path: config.build.assetsDir,
// filename: `js/[name]_${Version}.js`,
// chunkFilename: `js/[name]_${Version}.js`
// }
},
// chainWebpack: config => {
// config.entry.app = ['babel-polyfill', './src/main.js'];
// // 修复HMR
// config.resolve.symlinks(true)
// //修复 Lazy loading routes Error
// // config.plugin('preload')
// // .tap(args => {
// // args[0].fileBlacklist.push(/\.css/, /\.js/)
// // return args
// // })
// config.plugin('html').tap(args => {
// // args[0].chunksSortMode = 'none';
// //args[0].inlineSource = '(\.css|\.js$)'
// args[0].title = 'vue项目标题'
// return args;
// });
// // 富文本图片缩小放大 插件
// config.plugin('provide').use(webpack.ProvidePlugin, [{
// 'window.Quill': 'quill'
// }]);
// // 添加别名
// // config.resolve.alias
// // .set('@', resolve('src'))
// // .set('assets', resolve('src/assets'))
// // .set('components', resolve('src/components'))
// // .set('layout', resolve('src/layout'))
// // .set('base', resolve('src/base'))
// // .set('static', resolve('src/static'));
// //压缩图片
// // config.module
// // .rule("images")
// // .use("image-webpack-loader")
// // .loader("image-webpack-loader")
// // .options({
// // mozjpeg: { progressive: true, quality: 65 },
// // optipng: { enabled: false },
// // pngquant: { quality: "65-90", speed: 4 },
// // gifsicle: { interlaced: false },
// // webp: { quality: 75 }
// // });
// // 打包分析
// // if (process.env.IS_ANALYZ) {
// // config.plugin('webpack-report')
// // .use(BundleAnalyzerPlugin, [{
// // analyzerMode: 'static',
// // }]);
// // }
// },
// css相关配置
css: {
// 是否使用css分离插件
extract: true,
// 开启 css source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
sass: {
data: `@import "./src/styles/main.scss";` //css主文件入口
}
},
modules: false
},
parallel: require('os').cpus().length > 1,
/*
PWA相关配置
*/
pwa:{},
//webpack-dev-server相关配置
devServer: {
open: false,
host: "0.0.0.0",
port: 8080,
overlay: {
warnings: true,
errors: true
},
https: false,// 编译失败时刷新页面
hot: true,// 开启热加载
hotOnly: false,
proxy: {
"/api": {
target: "http://ip:8888",// ip为ip地址
// 如果要代理 websockets
ws: true,
changeOrigin: true,
//pathRewrite:{"^/api":""}
}
}
},
/*
第三方插件配置
*/
pluginOptions: {}
}
vue.config.js配置
最新推荐文章于 2024-04-07 18:51:51 发布