1. const path = require('path')
    2. function resolve(dir) {
    3.   return path.join(__dirname, dir)
    4. }
    6. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
    7.   .BundleAnalyzerPlugin
    9. // 代码压缩
    10. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    11. // gzip压缩
    12. const CompressionWebpackPlugin = require('compression-webpack-plugin')
    14. const port = 3000 // dev port
    16. const proxy = {
    17.   '/apis/': {
    18.     target: 'http://192.168.110.218:2375',
    19.     // secure: true,
    20.     changeOrigin: true,
    21.     pathRewrite: {
    22.       // '^/proxy': '/'
    23.     }
    24.   },
    25.   '/wechat/': {
    26.     target: 'https://api.weixin.qq.com',
    27.     secure: true,
    28.     changeOrigin: true,
    29.     pathRewrite: {
    30.       '^/wechat': '/'
    31.     }
    32.   },
    33.   '/abc/': {
    34.     target: 'http://192.168.110.65:1010',
    35.     // secure: true,
    36.     changeOrigin: true,
    37.     pathRewrite: {
    38.       '^/abc': '/'
    39.     }
    40.   }
    41. }
    43. // cdn链接
    44. const cdn = {
    45.   // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    46.   externals: {
    47.     vue: 'Vue',
    48.     vuex: 'Vuex',
    49.     vant: 'vant',
    50.     'vue-router': 'VueRouter',
    51.     axios: 'axios',
    52.     moment: 'moment',
    53.     'vue-clipboard2': 'VueClipboard'
    54.   },
    55.   // cdn的css链接
    56.   css: [
    57.     'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'
    58.   ],
    59.   // cdn的js链接
    60.   js: [
    61.     'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    62.     'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
    63.     'https://unpkg.com/vue-router@3.2.0/dist/vue-router.min.js',
    64.     'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js',
    65.     'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
    66.     'https://cdn.jsdelivr.net/npm/moment@2.18.1/min/moment.min.js',
    67.     'https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.min.js'
    68.   ]
    69. }
    71. module.exports = {
    72.   publicPath: process.env.NODE_ENV === 'development' ? '/' : '/qsbwechat/',
    73.   outputDir: 'qsbwechat',
    74.   assetsDir: 'static',
    75.   indexPath: 'index.html',
    76.   // filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存.
    77.   lintOnSave: process.env.NODE_ENV === 'development', // 是否在开发环境下通过eslint-loader在每次保存时lint代码(在生产构建时禁用 eslint-loader).
    78.   runtimeCompiler: false, // 是否使用包含运行时编译器的Vue构建版本.
    79.   transpileDependencies: [], // Babel显式转译列表.
    80.   productionSourceMap: process.env.NODE_ENV === 'development', // 如果你不需要生产环境的source map,可以将其设置为 false 以加速生产环境构建.
    81.   crossorigin: '', // 设置生成的HTML中<link rel="stylesheet">和<script>标签的crossorigin属性(注:仅影响构建时注入的标签).
    82.   integrity: false, // 在生成的HTML中的<link rel="stylesheet">和<script>标签上启用Subresource Integrity(SRI).
    83.   devServer: {
    84.     // 所有webpack-dev-server的选项都支持.
    85.     proxy: proxy,
    86.     port: port, // 端口
    87.     disableHostCheck: true // 解决域名访问本地运行出现 Invalid Host Header 的问题
    88.   },
    89.   css: {
    90.     // requireModuleExtension: false,                                                  // 当为true时,css文件名可省略module默认为false.
    91.     extract: process.env.NODE_ENV !== 'development', // 默认生产环境下是true,开发环境下是false.
    92.     sourceMap: false, // 是否为CSS开启source map.设置为true之后可能会影响构建的性能.
    93.     loaderOptions: { // 向CSS相关的loader传递选项(支持:css-loader postcss-loader sass-loader less-loader stylus-loader).
    94.       less: {
    95.         // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
    96.         // lessOptions: {
    97.         //   modifyVars: {
    98.         //     // 直接覆盖变量
    99.         //     'text-color': '#111',
    100.         //     'border-color': '#eee',
    101.         //     'button-primary-background-color': '#d7b759'
    102.         //     // // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
    103.         //     // hack: `true; @import "your-less-file-path.less";`
    104.         //   }
    105.         // }
    106.       }
    107.     }
    108.   },
    110.   // 对内部的webpack配置(比如修改、增加Loader选项)(链式操作).
    111.   chainWebpack: config => {
    112.     console.log('chainWebpack',config);
    113.     if (process.env.NODE_ENV !== 'development') {
    114.       // const analyzer = new BundleAnalyzerPlugin({
    115.       //   analyzerPort: 9999
    116.       // })
    117.       // config.plugin('webpack-bundle-analyzer').use(analyzer)
    119.       // csshansh
    120.       config.plugin('extract-css').tap(args => [{
    121.         filename: `css/[name].[contenthash:8].css`,
    122.         chunkFilename: `css/[name].[contenthash:8].css`
    123.       }])
    125.       // ============注入cdn start============
    126.       config.plugin('html').tap(args => {
    127.         // 生产环境或本地需要cdn时，才注入cdn
    128.         args[0].cdn = cdn
    129.         return args
    130.       })
    131.     }
    132.     config.resolve.alias
    133.       .set('@', resolve('src'))
    134.       .set('Sass', resolve('src/assets/sass'))
    135.       .set('Img', resolve('src/assets/images'))
    136.       .set('V', resolve('src/views'))
    137.     config.module.rules.delete('svg')
    138.     config.module
    139.       .rule('svg-smart')
    140.       .test(/\.svg$/)
    141.       .include.add(resolve('src/assets/icons'))
    142.       .end()
    143.       .use('svg-sprite-loader')
    144.       .loader('svg-sprite-loader')
    145.       .options({
    146.         symbolId: 'icon-[name]'
    147.       })
    148.   },
    150.   // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中.
    151.   // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数(该函数会在环境变量被设置之后懒执行).该方法的第一个参数会收到已经解析好的配置.在函数内,你可以直接修改配置,或者返回一个将会被合并的对象.
    152.   configureWebpack: config => {
    153.     // 用cdn方式引入，则构建时要忽略相关资源
    155.     if (process.env.NODE_ENV !== 'development') {
    156.       config.externals = cdn.externals
    158.       config.output.filename = `js/[name].[chunkhash:8].js`
    159.       config.output.chunkFilename = `js/[name].[chunkhash:8].js`
    161.       // 代码压缩
    162.       config.plugins.push(
    163.         new UglifyJsPlugin({
    164.           uglifyOptions: {
    165.             // 生产环境自动删除console
    166.             compress: {
    167.               // warnings: false, // 若打包错误，则注释这行
    168.               drop_debugger: true,
    169.               drop_console: true,
    170.               pure_funcs: ['console.log']
    171.             }
    172.           },
    173.           sourceMap: false,
    174.           parallel: true
    175.         })
    176.       )
    178.       // gzip压缩
    179.       const productionGzipExtensions = ['html', 'js', 'css']
    180.       config.plugins.push(
    181.         new CompressionWebpackPlugin({
    182.           filename: '[path].gz[query]',
    183.           algorithm: 'gzip',
    184.           test: new RegExp(
    185.             '\\.(' + productionGzipExtensions.join('|') + ')$'
    186.           ),
    187.           threshold: 10240, // 只有大小大于该值的资源会被处理 10240
    188.           minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
    189.           deleteOriginalAssets: false // 删除原文件
    190.         })
    191.       )
    193.       // 公共代码抽离
    194.       config.optimization = {
    195.         splitChunks: {
    196.           cacheGroups: {
    197.             vendor: {
    198.               chunks: 'all',
    199.               test: /node_modules/,
    200.               name: 'vendor',
    201.               minChunks: 1,
    202.               maxInitialRequests: 5,
    203.               minSize: 0,
    204.               priority: 100
    205.             },
    206.             common: {
    207.               chunks: 'all',
    208.               test: /[\\/]src[\\/]js[\\/]/,
    209.               name: 'common',
    210.               minChunks: 2,
    211.               maxInitialRequests: 5,
    212.               minSize: 0,
    213.               priority: 60
    214.             },
    215.             styles: {
    216.               name: 'styles',
    217.               test: /\.(sa|sc|c)ss$/,
    218.               chunks: 'all',
    219.               enforce: true
    220.             },
    221.             runtimeChunk: {
    222.               name: 'manifest'
    223.             }
    224.           }
    225.         }
    226.       }
    227.     }
    228.     config.performance = {
    229.       // hints: 'warning',                                                              // 警告 webpack 的性能提示
    230.       // maxEntrypointSize: 50000000,                                                   // 入口起点的最大体积
    231.       // maxAssetSize: 30000000,                                                        // 生成文件的最大体积
    232.     }
    233.   }
    235. }