两个月前,由于个人之前用的不是图形化界面的,所以对于许多的配置,变成了,额,怎么这个不能配了,我想要之前webpack可配置的一些插件,于是百度了一番,综合项目使用了,如下配置,算是对这些东西的一个记录
const path = require('path') const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = ['js', 'css'] const BrotliPlugin = require("brotli-webpack-plugin"); const apibaseUrl ="http://a.ab.cn:83/aaaa" function resolve(dir) { return path.join(__dirname, dir) } module.exports = { baseUrl: '/vue_dist/app/', devServer: { proxy: { '/vue_dist/api': { target: `${apibaseUrl}/api`, pathRewrite: { '^/vue_dist/api': '' }, }, } }, //生产环境构建文件的目录 outputDir:"dist", assetsDir:'assets', //生产环境是否生成SourceMap productionSourceMap: true, // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler: true, parallel: require('os').cpus().length > 1, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: IS_PROD?true:false, // 开启 CSS source maps? sourceMap:IS_PROD?false:true, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false },configureWebpack: config => { //生产环境去掉console 和 debugger //压缩代码减少文件体积 if (IS_PROD) { const plugins = []; plugins.push( new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, drop_debugger: true,//移除debugger pure_funcs: ['console.log']//移除console } }, sourceMap: false, parallel: true }) ); plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: productionGzipExtensions, threshold: 10240, minRatio: 0.8 }) ); // Zopfli压缩 https://webpack.js.org/plugins/compression-webpack-plugin/ /* plugins.push( new CompressionWebpackPlugin({ algorithm(input, compressionOptions, callback) { return zopfli.gzip(input, compressionOptions, callback); }, compressionOptions: { numiterations: 15 }, minRatio: 0.99, test: productionGzipExtensions }) ); plugins.push( new BrotliPlugin({ test: productionGzipExtensions, minRatio: 0.99 }) ); config.plugins = [ ...config.plugins, ...plugins ]; */ } }, chainWebpack: config => { // 修复HMR config.resolve.symlinks(true) //配置别名 config.resolve.alias .set("@", resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components')) if (IS_PROD) { // 生产环境配置 } else { //开发环境配置 } } }