vue cli3/4 vue.config.js配置详解
vue.config.js 创建的时候没有，需要手动创建
const path = require('path');
const webpack = require('webpack');
const UglifyPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
// const PurgeCssWebpackPlugin = require("purgecss-webpack-plugin"); // 主要的作用删除无意义的css，只能配合 mini-css-extract-plugin
// const glob = require("glob"); // 主要功能就是查找匹配的文件,配合PurgeCssWebpackPlugin
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css插件
//const AddCdnPlguin = require("add-asset-html-cdn-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
//const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
// const smw = new SpeedMeasureWebpackPlugin();
let {
version,
openGizp
} = require('./package.json'); //版本号和是否开启压缩
const production = process.env.NODE_ENV != 'development';
let buildReport = process.env.npm_lifecycle_event.includes('build:report'); //是否显示打包分析界面
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
// var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
function resolve(dir) {
return path.join(__dirname, dir) //此处使用path.resolve 或path.join 可自行调整
}
module.exports = {
// 基本路径
publicPath: production ? '' : '/',
// devtool: production ? 'none' : 'source-map',
// 输出文件目录
outputDir: 'dist',
assetsDir: './', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
indexPath: 'index.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// pages: {
// index: {
// entry: 'src/main.js', // page 的入口
// template: 'public/index.html', // 模板来源
// filename: 'index.html', // 在 dist/index.html 的输出
// title: 'Index Page', // 当使用 title 选项时，template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
// chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。
// }
// //subpage: 'src/main.js' //不太理解
// // 当使用只有入口的字符串格式时，
// // 模板会被推导为 `public/subpage.html`
// // 并且如果找不到的话，就回退到 `public/index.html`。
// // 输出文件名会被推导为 `subpage.html`。
// },
lintOnSave: false,//设置是否在开发环境下每次保存代码时都启用 eslint验证
css: {
loaderOptions: {
//配置全局scss变量或者mixin....
sass: {
//老版本是data，新版本是prependData
prependData: `@import "@/style/global.scss";`,
}
},
extract: false,
sourceMap: false,
requireModuleExtension: true,
},
filenameHashing: true, //文件hash
parallel: require('os').cpus().length > 1,
devServer: {
// publicPath: path.join(__dirname, "dist"),
contentBase: path.resolve(__dirname, './dist'), // webpack启动服务会在dist目录下
compress: true, //gzip 可以提升返回页面的速度
port: 8080,//服务器端口号
clientLogLevel: "none",
// lazy: true,
filename: "bundle.js",
open: true,
proxy: {
"/api": {
// target: "http://192.168.0.148:8080",
target: "http://zhcl.4000750222.com/testCoupon/",
pathRewrite: {
"^/api": ""
}
}
}
//在本地服务器开启gzip，线上服务器都支持gzip不需要设置
// before(app) {
// app.get(/.*.(js)$/, (req, res, next) => {
// req.url = req.url + '.gz';
// res.set('Content-Encoding', 'gzip');
// next();
// })
// }
},
configureWebpack: (config) => {
var optimization;
if (production) {
// 将每个依赖包打包成单独的js文件
optimization = {
minimizer: [
// new UglifyPlugin({
// parallel: true,
// uglifyOptions: {
// mangle: true,
// output: { //删除注释
// comments: false
// },
// warnings: false,
// compress: {
// drop_console: true, // console
// drop_debugger: false,
// pure_funcs: ['console.log'] // 移除console
// }
// }
// })
// new OptimizeCssAssetsPlugin({
// assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
// cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
// cssProcessorOptions: {
// safe: true,
// discardComments: {
// removeAll: true
// }
// }, //传递给cssProcessor的选项，默认为{}
// canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
// }),
],
runtimeChunk: 'single',
splitChunks: {
// inital 只操作同步的 all 所有的 async 异步的
chunks: "all", // 默认支持异步的代码分割 import()
minSize: 30000, // 文件超过30k 我就会抽离他
maxSize: 0,
minChunks: 2, // 最少模块引用2次才抽离
maxAsyncRequests: 5, // 最多5个请求
maxInitialRequests: 3, // 最多首屏加载3个请求
automaticNameDelimiter: "-", // xxx~a~b
automaticNameMaxLength: 30, // 最长名字打大小
name: true,
// maxInitialRequests: 10,
// minSize: 50000, // 依赖包超过20000bit将被单独打包
cacheGroups: {
// vendor: {
// test: /[\\/]node_modules[\\/]/,
// name(module) {
// // get the name. E.g. node_modules/packageName/not/this/part.js
// // or node_modules/packageName
// const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// // npm package names are URL-safe, but some servers don't like @ symbols
// return `${packageName.replace('@', '')}`
// }
// },
vendor: {
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: 'all',
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'
}
}
}
};
Object.assign(config, {
// externals: {
// 'vue': 'Vue',
// 'element-ui': 'ElementUI',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex'
// },
optimization,
output: {
...config.output,
filename: `js/[name].[chunkhash].${
version}.js`,
chunkFilename: `js/[name].[chunkhash].${
version}.js`
},
plugins: [
...config.plugins,
// new PurgeCssWebpackPlugin({
// paths: glob.sync('./src/**/*', {
// nodir: true
// }),
// extractors: [{
// extractor: class Extractor {
// static extract(content) {
// const validSection = content.replace(
// /+/gim,
// ""
// );
// return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
// }
// },
// extensions: ["html", "vue"]
// }],
// whitelist: ["html", "body"],
// whitelistPatterns: [/el-.*/],
// whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
// }),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true
}
}, //传递给cssProcessor的选项，默认为{}
canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
})
// new webpack.ProvidePlugin({
// moment: "moment"
// })
]
})
} else {
// 为开发环境修改配置...
}
},
// transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: config => {
if (production) {
config.optimization.minimize(true);
// config.plugin('cdn').use(
// new HtmlWebpackPlugin({
// title: '测试项目',
// template: resolve('./build_template/index.html'),
// // cdn（自定义属性）加载的资源，不需要手动添加至index.html中,
// // 顺序按数组索引加载
// cdn: {
// css:['https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css'],
// js: [
// 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
// 'https://cdn.bootcss.com/element-ui/2.12.0/index.js',
// 'https://cdn.bootcss.com/vue-router/3.0.0/vue-router.min.js',
// // 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
// // "https://cdn.bootcss.com/vue/2.6.10/vue.min.js",
// // "https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js",
// // "https://cdn.bootcss.com/element-ui/2.12.0/index.js",
// "https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js",
// "https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js",
// "https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js",
// "https://cdn.bootcss.com/mathjs/6.2.1/math.min.js",
// "https://cdn.bootcss.com/xlsx/0.14.3/xlsx.full.min.js"
// ]
// },
// minify: {
// //是否对大小写敏感，默认false
// caseSensitive: true,
// //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled 默认false
// collapseBooleanAttributes: true,
// //是否去除空格，默认false
// collapseWhitespace: true,
// //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
// minifyCSS: true,
// //是否压缩html里的js（使用uglify-js进行的压缩）
// minifyJS: true,
// //Prevents the escaping of the values of attributes
// preventAttributesEscaping: true,
// //是否移除属性的引号 默认false
// removeAttributeQuotes: true,
// //是否移除注释 默认false
// removeComments: true,
// //从脚本和样式删除的注释 默认false
// removeCommentsFromCDATA: true,
// //是否删除空属性，默认false
// removeEmptyAttributes: true,
// // 若开启此项，生成的html中没有 body 和 head，html也未闭合
// removeOptionalTags: false,
// //删除多余的属性
// removeRedundantAttributes: true,
// //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false
// removeScriptTypeAttributes: true,
// //删除style的类型属性， type="text/css" 同上
// removeStyleLinkTypeAttributes: true,
// //使用短的文档类型，默认false
// useShortDoctype: true,
// }
// })
// )
// config.plugin('css-assets').use(new OptimizeCssAssetsPlugin({
// assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
// cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
// cssProcessorOptions: {
// safe: true,
// discardComments: {
// removeAll: true
// }
// }, //传递给cssProcessor的选项，默认为{}
// canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
// }))
if (buildReport) {
config.plugin('webpack-report') // 打包分析
.use(BundleAnalyzerPlugin, [{
analyzerMode: 'static',
}]);
}
if (openGizp) {
config.plugin(openGizp).use(new CompressionPlugin({
//test: /\.js$|\.html$|.\css/, //匹配文件名
test: /\.(js|css|json|txt|html|svg|mp3)(\?.*)?$/i, //匹配文件名
filename: '[path].gz[query]',
algorithm: 'gzip',
minRatio: 0.8,
threshold: 10240, //对超过10k的数据压缩
deleteOriginalAssets: false //是否删除源文件
}))
}
// 压缩图片
config.module.rule("images")
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, {
limit: 7000}))
// config.module.rule('images')
// .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({ bypassOnDebug: true })
// config.module
// .rule("images")
// .use("image-webpack-loader")
// .loader("image-webpack-loader")
// .options({
// mozjpeg: {
// progressive: true,
// quality: 65
// },
// optipng: {
// enabled: false
// },
// pngquant: {
// quality: [0.65, 0.90],
// speed: 4
// },
// gifsicle: {
// interlaced: false
// },
// webp: {
// quality: 75
// }
// });
}
// config
// .entry('index')
// .add('babel-polyfill')
// .end();
// set('jquery$', 'jquery/dist/jquery.min.js');
//配置音频播放loader
// 修复HMR
config.resolve.symlinks(true);
// 移除 prefetch 插件
config.plugins.delete('prefetch');
// 移除 preload 插件
config.plugins.delete('preload');
config.resolve.alias
.set('@', resolve('src'))
.set('@assets', resolve('./src/assets'))
}
}