webpack配置优化

2021-09-23 09:33:09 阅读：128 来源： 互联网

标签：name process 优化配置 loader webpack env config port

  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 }

标签：name,process,优化,配置,loader,webpack,env,config,port
来源： https://www.cnblogs.com/guwufeiyang/p/15322741.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack配置优化