vue.config.js配置文件参考

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const smp = new SpeedMeasurePlugin();
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const CompressionPlugin = require("compression-webpack-plugin")

// 定义好一份CDN对象，动态渲染到静态的html模板页面上去
const cdn = {
  // css: ["//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"],
  // js: [
  //   // "//unpkg.com/element-ui@2.13.2/lib/index.js",
  //   'https://cdn.jsdelivr.net/npm/vue'
  // ]
}

//判断是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    pages: {
          index: {
          entry: 'src/main.js', // page 的入口
          template: 'public/index.html',
          chunks: ['chunk-vendors', 'chunk-common', 'index'],
          cdn: cdn
        }
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
    },
    outputDir: 'dist',
    productionSourceMap: false,
    chainWebpack: (config) => {
        // 生产环境，开启js\css压缩
        // if (process.env.NODE_ENV === 'production') {
        //   config.plugin('compressionPlugin').use(new CompressionPlugin({
        //     test: /\.(js|css)$/, // 匹配文件名
        //     threshold: 10240, // 对超过10k的数据压缩
        //     minRatio: 0.8,
        //     deleteOriginalAssets: true // 删除源文件
        //   }))
        // }
        config.module.rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('url-loader')
            .loader('url-loader')
            .options({
               limit: 10240    // 图片小于10k转为base64,默认4k
            })
            .end()
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
       // 生产环境配置
        // if (isProduction) {
        //     // 生产环境注入 cdn
        //     config.plugin('html').tap(args => {
        //             args[0].cdn = cdn;
        //             return args;
        //         });
        // }
        // config.entry.app = ["babel-polyfill", './src/main.js']
        // set svg-sprite-loader
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        //生产环境注入 cdn
        // externals: isProduction && {
        //     'vue': 'Vue',
        //     // 'vuex': 'Vuex',
        //     // 'vue-router': 'VueRouter',
        // } || {},
        plugins: [
          // new BundleAnalyzerPlugin()
        ]
    }),
    transpileDependencies: ['vuejs-datepicker', 'axios'],
    devServer: {
        open: true, //配置自动启动浏览器
        // publicPath: '/',
        // proxy: {
        //     '/api': {
        //         // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
        //         target: 'http://120.24.1.172:8002',
        //         // 允许跨域
        //         changeOrigin: true,
        //         ws: true,
        //         pathRewrite: {
        //             '^/': ''
        //         }
        //     }
        // }
    }
}
zhaobinglong / myBlog

vue.config.js配置文件参考 #129
