• webpack配置优化


      1 'use strict'
      2 const path = require('path')
      3 const defaultSettings = require('./src/settings.js')
      4 
      5 function resolve(dir) {
      6   return path.join(__dirname, dir)
      7 }
      8 
      9 const name = defaultSettings.title || '中通服人力绩效管理系统' // page title
     10 
     11 // If your port is set to 80,
     12 // use administrator privileges to execute the command line.
     13 // For example, Mac: sudo npm run
     14 // You can change the port by the following methods:
     15 // port = 9528 npm run dev OR npm run dev --port = 9528
     16 const port = process.env.port || process.env.npm_config_port || 9568 // dev port
     17 
     18 // All configuration item explanations can be find in https://cli.vuejs.org/config/
     19 module.exports = {
     20   /**
     21    * You will need to set publicPath if you plan to deploy your site under a sub path,
     22    * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
     23    * then publicPath should be set to "/bar/".
     24    * In most cases please use '/' !!!
     25    * Detail: https://cli.vuejs.org/config/#publicpath
     26    */
     27   // transpileDependencies: ['element-ui'],
     28   publicPath: '/ccs-hr/',
     29   outputDir: 'dist',
     30   assetsDir: 'static',
     31   lintOnSave: process.env.NODE_ENV === 'development',
     32   productionSourceMap: false,
     33   devServer: {
     34     port: port,
     35     // open: true,
     36     overlay: {
     37       warnings: false,
     38       errors: true
     39     },
     40     proxy: {
     41       // change xxx-api/login => mock/login
     42       // detail: https://cli.vuejs.org/config/#devserver-proxy
     43       [process.env.VUE_APP_BASE_API]: {
     44         target: `http://127.0.0.1:${port}/mock`,
     45         changeOrigin: true,
     46         pathRewrite: {
     47           ['^' + process.env.VUE_APP_BASE_API]: ''
     48         }
     49       }
     50     },
     51     after: require('./mock/mock-server.js')
     52   },
     53   configureWebpack: {
     54     // provide the app's title in webpack's name field, so that
     55     // it can be accessed in index.html to inject the correct title.
     56     name: name,
     57     resolve: {
     58       alias: {
     59         '@': resolve('src')
     60       }
     61     }
     62   },
     63   chainWebpack(config) {
     64     config.plugins.delete('preload') // TODO: need test
     65     config.plugins.delete('prefetch') // TODO: need test
     66     config.entry('main').add('babel-polyfill') // main是入口js文件
     67 
     68     // set svg-sprite-loader
     69     config.module
     70       .rule('svg')
     71       .exclude.add(resolve('src/icons'))
     72       .end()
     73     config.module
     74       .rule('icons')
     75       .test(/.svg$/)
     76       .include.add(resolve('src/icons'))
     77       .end()
     78       .use('svg-sprite-loader')
     79       .loader('svg-sprite-loader')
     80       .options({
     81         symbolId: 'icon-[name]'
     82       })
     83       .end()
     84 
     85     // set preserveWhitespace
     86     config.module
     87       .rule('vue')
     88       .use('vue-loader')
     89       .loader('vue-loader')
     90       .tap(options => {
     91         options.compilerOptions.preserveWhitespace = true
     92         return options
     93       })
     94       .end()
     95 
     96     config
     97       // https://webpack.js.org/configuration/devtool/#development
     98       .when(process.env.NODE_ENV === 'development',
     99         config => config.devtool('cheap-source-map')
    100       )
    101 
    102     config
    103       .when(process.env.NODE_ENV !== 'development',
    104         config => {
    105           config
    106             .plugin('ScriptExtHtmlWebpackPlugin')
    107             .after('html')
    108             .use('script-ext-html-webpack-plugin', [{
    109               // `runtime` must same as runtimeChunk name. default is `runtime`
    110               inline: /runtime..*.js$/
    111             }])
    112             .end()
    113           config
    114             .optimization.splitChunks({
    115               chunks: 'all',
    116               cacheGroups: {
    117                 libs: {
    118                   name: 'chunk-libs',
    119                   test: /[\/]node_modules[\/]/,
    120                   priority: 10,
    121                   chunks: 'initial' // only package third parties that are initially dependent
    122                 },
    123                 elementUI: {
    124                   name: 'chunk-elementUI', // split elementUI into a single package
    125                   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
    126                   test: /[\/]node_modules[\/]_?element-ui(.*)/ // in order to adapt to cnpm
    127                 },
    128                 commons: {
    129                   name: 'chunk-commons',
    130                   test: resolve('src/components'), // can customize your rules
    131                   minChunks: 3, //  minimum common number
    132                   priority: 5,
    133                   reuseExistingChunk: true
    134                 }
    135               }
    136             })
    137           config.optimization.runtimeChunk('single')
    138         }
    139       )
    140   }
    141 }
  • 相关阅读:
    使用JRadioButton 示例
    使用JTextArea示例
    python与c语言的区别以及python的小小基础
    Linux常用的服务器构建
    在VMware虚拟机软件中安装的Ubuntu虚拟机的窗口不能自动调整大小的解决办法
    Ubuntu 下环境搭建系列 —— 安装 Google Chrome
    Linux命令复习和练习_03
    Android hybrid App项目构建和部分基本开发问题
    Ionic Framework
    node.js代理设置
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/15322741.html
Copyright © 2020-2023  润新知