webpack和vue3优化方案

https://www.jianshu.com/p/adc33ac846f9

https://www.cnblogs.com/ajaemp/p/12120402.html

https://blog.csdn.net/lileLife/article/details/103517037

vue.config.js下面两个配置是等同的

module.exports = {
  configureWebpack: {
      
  }
}
// OR
module.exports = {
  configureWebpack: config => {
    
  }
}

一个很好的引用百度地图的案例

https://www.dazhuanlan.com/2019/09/26/5d8c39c95395c/

 

uglify不支持es6,所以用terser

cnpm install terser

在vue.config.js里设置

const TerserPlugin = require('terser-webpack-plugin');

    configureWebpack: {
        optimization: {
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log'] // 移除console
                        }
                    },
                }),
            ]
        },
        resolve: {
            extensions: ['.js', '.json', '.vue', '.scss', '.html'],
        },
    },

 

去除prefetch等

 chainWebpack: config => {
        config
            .entry('index')
            .add('babel-polyfill')
            .end();
        // 配置别名
        config.resolve.alias
            .set("@", resolve("src"))
            .set("@img", resolve("src/assets/images"))
            .set("@css", resolve("src/assets/styles/css"))
            .set("@scss", resolve("src/assets/styles/scss"));
        // 生产环境配置
        if (isProduction) {
            // 删除预加载
            config.plugins.delete('preload');
            config.plugins.delete('prefetch');
            // 压缩代码
            config.optimization.minimize(true);
            // 分割代码
            config.optimization.splitChunks({
                chunks: 'all'
            })
            // 生产环境注入cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },

 

css优化

    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // 引入全局变量样式
                data: `
                    @import "@/stylePath/theme.scss;
                `
            }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false,
    },

 

Use // eslint-disable-next-line to ignore the next line.解决办法

  devServer: {
        port: 9090,
        // https: true,
        //  allowedHosts: ['mungerfans.com'],
        //    open: true, // 自动开启浏览器
        // compress: true, // 开启压缩
       overlay: {
            warnings: false,
            errors: false
        },
        lintOnSave: false
    },

参考网站

https://www.jianshu.com/p/3043d474fb86

 

部署后载静态页面路径错误
需要在vue.config里添加
publicPath: './',