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 }