|
- // 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
- // },
- // },
- // }),
- // ],
- // }
- }
|