vue.config.js探寻最佳实践

process.env.VUE_APP_BASE_API = 'api';process.env.VUE_APP_TIMEOUT = 30000;process.env.VUE_APP_VERSION = "1.0.0-beta.1";const Timestamp = new Date().getTime();const CompressionWebpackPlugin = require('compression-webpack-plugin')//首先需要引入filemanager-webpack-plugin插件const FileManagerPlugin = require('filemanager-webpack-plugin')const productionGzipExtensions = ['js', 'css']module.exports = {    publicPath: './',    productionSourceMap: false,    devServer: {        proxy: {            '/api/': {                target: 'http://**.**.21.138:59083',                ws: true,                changeOrigin: true,                pathRewrite: {                    '^/api/': '/'                }            }        }    },    //修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title        chainWebpack: config => {        config.plugin('html').tap(args => {            args[0].title = "智能表单工具"; return args;        })        if (process.env.NODE_ENV === 'production') {            // 生产环境中，打包后dist立即生成.zip文件,减少手动压缩的步骤                        config.plugin('compress').use(FileManagerPlugin, [{                onEnd: {                    delete: ['./*.zip'],                    archive: [{                        source: './dist',                        destination: `./dist-${Timestamp}.zip`                    }]                }            }]);        }    },    configureWebpack: config => {        if (process.env.NODE_ENV === 'production') {            // 生产环境中，打包时压缩，减小js包大小，需nginx配合            config.plugins.push(                            new CompressionWebpackPlugin({                asset: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename                                    algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),                threshold: 10240, minRatio: 0.6            })                    }    },    configureWebpack: {        // 运行和打包忽略以下依赖，但需在index.html引入js min文件。好处：减少打包后js的大小，加快请求速度；缺点：使用不了vue dev-tool，                externals: {            'vue': 'Vue', 'vue-router': 'VueRouter'        },        // 输出重构  打包编译后的 文件名称 【模块名称.版本号.时间戳】。优点：配合index.html和nginx，使重新部署后浏览器不会缓存                output: {            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`        }    },    //兼容ie        transpileDependencies: ["sm-crypto"]}

1. 使用`chainWebpack`钩子对webpack进行配置

```js
chainWebpack: config => {
    config.module
        .rule('images')
        .use('url-loader')
        .loader('url-loader')
        .tap(options => {
            // 修改它的选项...
            return options
        })
}
```

2. 使用`configureWebpack`配置webpack

```js
configureWebpack: {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}
```

3. 使用`devServer`设置本地服务器

```js
devServer: {
    port: 8080,
    open: true,
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true
        }
    }
}
```

4. 将构建后的文件夹放在特定的路径

```js
outputDir: path.resolve(__dirname, '../server/public')
```

5. 使用`css.loaderOptions`配置css-loader

```js
css: {
    loaderOptions: {
        css: {
            // 这里的选项会传递给 css-loader
        },
        postcss: {
            // 这里的选项会传递给 postcss-loader
        }
    }
}
```

6. 使用`pluginOptions`配置插件

```js
pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'scss',
        patterns: [
            path.resolve(__dirname, './src/styles/*.scss')
        ]
    }
}
```