vue cli 3のvue.config.jsファイル構成

'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = 'vue project' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
const port = 8081 // dev port
const HtmlWebpackPlugin = require('html-webpack-plugin') //   CDN    
const externals = { //      
  // vue: 'Vue',
  // 'vue-router': 'VueRouter',
  // vuex: 'Vuex',
  // axios: 'axios',
  // 'element-ui': 'ElementUI',
  // vconsole:'vConsole', //       
  moment: 'moment',
  echarts: 'echarts'
}
const cdn = {
  //     
  dev: {
    css: [

    ],
    js: [

    ]
  },
  //          CDN  
  build: {
    css: [
      // 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.5.4/theme-chalk/index.css'
    ],
    js: [
      // 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
      // 'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
      // 'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
      // 'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.23.0/moment.min.js',
      'https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js'
    ]
  }
}
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {

  // 205 ||   
  // publicPath: '/web/vue/',
  runtimeCompiler: true, //        
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  // eslint-loader          
  lintOnSave: false,
  //             source map，        false          。
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    //     
    proxy: {
      "/api": {
        target: 'http://192',
        changeOrigin: true, //       
        ws: true
        // pathRewrite: {
        //   //     
        //   "/api": "" //        api   ，     ,             ，       
        // }
      }
    }
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('./src'),
        'assets': resolve('./src/assets'),
        'style': resolve('./src/style')
      }
    },
    externals: process.env.NODE_ENV === 'production' ? externals: {}
  },
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-plugin-px2rem')({
                      rootValue: 46, //    ，   100  ，              1rem 50px,               px         px 。
                      // unitPrecision: 5, //  REM           。
                      //propWhiteList: [],  //         ，                。
                      // propBlackList: [], //   
                      exclude: /(node_module)/,  //  false，  （reg）                 ，  /(node_module)/ 。      UI    px    rem，          
                      // selectorBlackList: [], //       px    
                      // ignoreIdentifier: false,  //（boolean/string）         ，  ignoreidentifier ，replace      true。
                      // replace: true, // （   ）    REM   ，       。
                      mediaQuery: false,  //（   ）          px。
                      minPixelValue: 0 //           (3px   rem)。    0
                  }),
              ]
          }
      }
  },
  chainWebpack: config => {
      // config.entry.app = ['babel-polyfill', './src/main.js'];
      config.plugins.delete("preload"); // TODO: need test
      config.plugins.delete("prefetch"); // TODO: need test

      //  vue-cli    webpack            
      config.plugin('html').tap(args => {
        if (process.env.NODE_ENV === 'production') {
            args[0].cdn = cdn.build
        }
        if (process.env.NODE_ENV === 'development') {
            args[0].cdn = cdn.dev
        }
        return args
    })

      // set svg-sprite-loader
      // config.entry('main').add('babel-polyfill');
      config.module
      .rule('iview')
      .test(/iview.src.*?js$/)
      .use('babel')
        .loader('babel-loader')
        .end();

      config.module
        .rule("svg")
        .exclude.add(resolve("src/icons"))
        .end();
      config.module
        .rule("icons")
        .test(/\.svg$/)
        .include.add(resolve("src/icons"))
        .end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
          symbolId: "icon-[name]"
        })
        .end();

      // set preserveWhitespace
      config.module
        .rule("vue")
        .use("vue-loader")
        .loader("vue-loader")
        .tap(options => {
          options.compilerOptions.preserveWhitespace = true;
          return options;
        })
        .end();

      config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === "development", config =>
        config.devtool("cheap-source-map")
      );

      config.when(process.env.NODE_ENV !== "development", config => {
        config
          .plugin("ScriptExtHtmlWebpackPlugin")
          .after("html")
          .use("script-ext-html-webpack-plugin", [
            {
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }
          ])
          .end();
        config.optimization.splitChunks({
          chunks: "all",
          cacheGroups: {
            libs: {
              name: "chunk-libs",
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: "initial" // only package third parties that are initially dependent
            },
            // elementUI: {
            //   name: "chunk-elementUI", //  elementUI      
            //   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            //   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ //    cnpm
            // },
            commons: {
              name: "chunk-commons",
              test: resolve("src/components"), //        
              minChunks: 3, //  minimum common number
              priority: 5,
              reuseExistingChunk: true
            }
          }
        });
        config.optimization.runtimeChunk("single");
      });

  }
}