某个移动端vue项目的webpack配置

 

 

const path = require('path');
const CompressionPlugin = require("compression-webpack-plugin");

function resolve(dir) {
    return path.join(__dirname, dir)
}

// vue.config.js
module.exports = {
    /*
      Vue-cli3:
      Crashed when using Webpack `import()` #2463
      https://github.com/vuejs/vue-cli/issues/2463
     */
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,

    // 多入口配置
    // pages: {
    //   index: {
    //     entry: 'src/main.js',
    //     template: 'public/index.html',
    //     filename: 'index.html',
    //   }
    // },
    //打包app时放开该配置
    publicPath:process.env.NODE_ENV==='production'?'././':'',
    configureWebpack: config => {
        //生产环境取消 console.log
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        }
    },
    chainWebpack: (config) => {

        config.resolve.alias
            .set('@', resolve('src'))
            .set('@api', resolve('src/api'))

        //生产环境，开启js\css压缩
        if (process.env.NODE_ENV === 'production') {
            config
                .plugin('compression-webpack-plugin')
                .use(new CompressionPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: /\.(js|css|less|sass)$/, // 匹配文件名
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false, // 不删除源文件
                    minRatio: 0.8
                }))
                .end()
        }

        // 配置 webpack 识别 markdown 为普通的文件
        config.module
            .rule('markdown')
            .test(/\.md$/)
            .use()
            .loader('file-loader')
            .end()

        // 编译某些npm包里的es6代码
        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()
            
        config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({ remUnit: 192 })
            .end()
    },

    plugins: {
        autoprefixer:{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流浏览器最近2个版本
          ],
          grid: true
        },
        'postcss-px-to-viewport': {
            viewportWidth: 750,
            unitToConvert: "px", // 要转换的单位，默认是’px’
			mediaQuery: true,  //媒体查询里也会转换px
            unitPrecision: 3, // 指定px转换为视窗单位值的小数位数，默认是5
            propList: [ // 指定可以转换的css属性，默认是[’’]，代表全部属性进行转换
              "*"
            ],
            viewportUnit: "vw", //  指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: [], // 指定不转换为视窗单位的类，保留px，值为string或正则regexp，建议定义一至两个通用的类名
            minPixelValue: 1, // 默认值1，小于或等于1px不转换为视窗单位,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/, // 设置忽略文件，如node_modules ,如果是regexp, 忽略全部匹配文件, 如果是数组array, 忽略指定文件
        },
    },
    css: {
        loaderOptions: {
            less: {
                globalVars: {
                    primary: '#fff'
                }
            }
        }
    },

    devServer: {
        // port: 3000,
        proxy: {
            '/': {
                target: 'https://risk-api.xxxxxxx.com/wnh/factoring',
                changeOrigin: true,
                pathRewrite: {
                    '/': ''
                },
            },
        },
        overlay: {

            warning: false,

            errors: false

        }
    },

    lintOnSave: false,//关闭eslintrc语法检查
}