vue2.0项目配置:(一)vue.config.js配置
vue2.0项目中各文件介绍以及配置相关......
·
//需要下载的依赖
const moment = require('moment');
const TerserPlugin = require('terser-webpack-plugin')
const FileManageerPlugin = require('filemanager-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
productionSourceMap: false, // 生产环境不输出map文件,以加速生产环境构建。
transpileDependencies: ['*'],
//publicPath:'./', //修改为相对路径,打包时放开改配置(或者: publicPath: process.env.BASE_URL,)
outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
indexPath: 'home.html', //指定生成的 home.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
assetsDir: './' + new Date().getTime() + '/static',
lintOnSave: false, // 是否在保存的时候检查
//生产环境取消 console.log (通过 terser-webpack-plugin 来实现)
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
const plugins = [];
const fileTimeName = moment().format('YYYY-MM-DD-HHmm');
plugins.push(
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
},
cache: true, // 启用文件缓存
parallel: true // 使用多进程并行运行来提高构建速度
// sourceMap: false // 映射错误信息到模块
})
)
//打包时自动生成dist.zip + 时间戳
plugins.push(
new FileManageerPlugin({
onEnd: {
//创建目录
mkdir: ['./tempzip/' + 'dist'],
//复制文件到tempzip
copy: [{
source: './dist',
destination: './tempzip/' + 'dist'
},],
//打包temzip,输出到根目录下
archive: [{
source: './tempzip/',
destination: `admin-web-time:${fileTimeName}.zip`
}],
//删除tempzip
delete: [
'./tempzip/'
]
}
})
);
config.plugins = [
...config.plugins,
...plugins
]
}
// 公共代码抽离
config.optimization = {
splitChunks: {
runtimeChunk: 'single',
chunks: 'all',
minSize: 20000, // 允许新拆出 chunk 的最小体积,也是异步 chunk 公共模块的强制拆分体积
// minChunks: 2,
maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
enforceSizeThreshold: 25000, // 强制执行拆分的体积阈值并忽略其他限制
cacheGroups: {
antDesign: {
name: 'chunk-antDesign',
test: /[\\/]node_modules[\\/]_?@ant-design(.*)/,
priority: 39,
minSize: 0,
enforce: true
},
common: {
chunks: 'all', // 'all', 'async'仅打包异步引用的依赖, 'initial', 仅打包同步引用的依赖
test: /[\\/]src[\\/]js[\\/]/, //正则
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
},
chainWebpack: config => {
config.module.rule('js').use('babel-loader')
config.entry('main').add('babel-polyfill')
// 开启图片压缩
config.module.rule('images')
.test(/\.(png|gif|jpe?g|svg)(\?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.tap(options => Object.assign(options, {
limit: 6140
}))
// 生产环境开启js、css压缩
if (process.env.NODE_ENV === 'production') {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{analyzerMode: 'static'}])
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
test: /\.(js|css|less)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}))
}
//设置快捷符号代替指定路径(@默认src文件夹)
config.resolve.alias
.set('@$', resolve('src'))
.set('@api', resolve('src/api'))
.set('@assets', resolve('src/assets'))
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'))
// 配置 webpack 识别 markdown 为普通的文件
config.module
.rule('markdown')
.test(/\.md$/)
.use()
.loader('file-loader')
.end()
// 编译vxe-table包里的es6代码,解决IE11兼容问题
config.module
.rule('vxe')
.test(/\.js$/)
.include
.add(resolve('node_modules/vxe-table'))
.add(resolve('node_modules/vxe-table-plugin-antd'))
.end()
.use()
.loader('babel-loader')
.end()
},
// 前端运行服务器环境配置
devServer: {
port: 8086, //服务器端口号
hot:true, //热重载
https: false,
hotOnly: false,
open: true, //配置自动启动浏览器
overlay:{
warning:false,
error:true
},
proxy: { //配置代理
'/api123': { //在接口前面携带
target: 'http://10.158.17.10:8088/pwc_w_web/', // 需要跨域的 地址
changeOrigin: true, //允许跨域
ws: false, //是否开启websocket
pathRewrite: {
'^/api123': ''
}
}
},
},
};
更多推荐
已为社区贡献1条内容
所有评论(0)