// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 压缩js const imageWebpackLoader = require('image-webpack-loader');//压缩图片 const path = require('path'); const resolve = dir => { return path.join(__dirname, dir) } let timeStamp = new Date().getTime(); let externals = {} let cdn = { css: [], js: [] } // const isProduction = process.env.VUE_APP_ENV == 'production' // 判断是否是生产环境 const isProduction = true if (isProduction) { externals = { /** * externals 对象属性解析: * '包名' : '在项目中引入的名字' */ 'vue': 'Vue', 'vant': 'vant', 'element-ui': 'ELEMENT', // 'vuex': 'Vuex', // 'vue-router': 'VueRouter', } cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表 ], js: [ // vue must at first! 'https://unpkg.com/vue@2.6.11/dist/vue.js', // vuejs 'https://unpkg.com/vant@2.12.48/lib/vant.min.js', //vant 'https://unpkg.com/element-ui@2.15.12/lib/index.js', // element-ui js // 'https://cdn.bootcdn.net/ajax/libs/vuex/3.4.0/vuex.global.min.js',//vuex // 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.global.min.js',//vue-router ] } } module.exports = { configureWebpack: { output: { // 输出重构 打包编译后的js文件名称,添加时间戳. filename: `js/js[name].${timeStamp}.js`, chunkFilename: `js/chunk.[id].${timeStamp}.js`, }, resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, externals, }, css: { extract: { // 打包后css文件名称添加时间戳 filename: `css/[name].${timeStamp}.css`, chunkFilename: `css/chunk.[id].${timeStamp}.css`, }, loaderOptions: { css: { }, // postcss: { // // options here will be passed to postcss-loader // plugins: [require('postcss-px2rem')({ // remUnit: 75 // })] // } } }, pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'favicon.ico', msTileImage: 'favicon.ico' } }, //http://www.metavatar.cc/ devServer: { overlay: { warnings: false, errors: false }, proxy: { '/api': { // target: 'https://smapitestmalls,iformall.com/C/api', target: process.env.VUE_APP_API_ROOT + '/api', changeOrigin: true, pathRewrite: { '^/api': '' }, }, } }, lintOnSave: false, publicPath: './', // 打包后引用的资源路径 chainWebpack: config => { // favicon图标 config.plugin('html').tap(args => { args[0].favicon = './public/favicon.ico'; return args; }); // 注入cdn变量 (打包时会执行) config.plugin('html').tap(args => { args[0].cdn = cdn // 配置cdn给插件 return args }) // 图片路径 config.module.rule('images') .use('url-loader') .tap(options => ({ name: './assets/images/[name].[ext]', quality: 85, limit: 0, esModule: false, })) //图片压缩 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.9], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } }) .end(); // 压缩js,只能线上,本地会js访问错误,会将js压缩成.gz文件 if (process.env.VUE_APP_ENV != 'development') { config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ test: /\.(js|css|scss|woff|woff2|ttf)$/, // 匹配文件名 threshold: 20480, // 对超过20k的数据压缩 minRatio: 0.8, deleteOriginalAssets: true // 删除源文件 })) // 压缩字体 // config.module.rule('fonts').use('url-loader') // .tap(options => { // options.limit=8192; // options.name='[name].[ext]'; // return options; // }); // config.plugin('compression').use(CompressionWebpackPlugin); } } // configureWebpack: { // plugins: [ // //打包环境去掉console.log // new UglifyJsPlugin({ // uglifyOptions: { // compress: { // drop_console: true, //注释console // drop_debugger: true, //注释debugger // pure_funcs: ['console.log'], //移除console.log // }, // }, // }), // ], // } }