vue cli3之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/vue@2.6.10/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");
      });
  }
}