一、基础配置

  1. let { version, openGzip } = require("./package.json"); // 引入版本号和是否开启Gzip压缩
  2. const path = require("path"); // 引入path路径
  4. module.exports = {
  5.   publicPath: "./", // 输出基本路径
  6.   outputDir: "dist", // 输出文件目录
  7.   indexPath: "index.html", // index.html 的输出路径 (相对于 outputDir)
  8.   lintOnSave: false, // eslint-loader 是否在保存的时候检查
  9.   // webpack配置
  10.   chainWebpack: (config) => {},
  11.   configureWebpack: (config) => {
  12.     if (process.env.NODE_ENV === "production") {
  13.       // 为生产环境修改配置...
  14.       config.mode = "production";
  16.       // 利用splitChunks将每个依赖包单独打包，在生产环境下配置
  17.       // npm install --save-dev add-asset-html-webpack-plugin
  18.       config.optimization = {
  19.         runtimeChunk: "single",
  20.         splitChunks: {
  21.           chunks: "all",
  22.           maxInitialRequests: Infinity,
  23.           minSize: 20000, // 依赖包超过20000bit将被单独打包
  24.           cacheGroups: {
  25.             vendor: {
  26.               test: /[\\/]node_modules[\\/]/,
  27.               name(module) {
  28.                 // get the name. E.g. node_modules/packageName/not/this/part.js  or node_modules/packageName
  29.                 const packageName = module.context.match(
  30.                   /[\\/]node_modules[\\/](.*?)([\\/]|$)/
  31.                 )[1];
  32.                 // npm package names are URL-safe, but some servers don't like @ symbols
  33.                 return `npm.${packageName.replace("@", "")}`;
  34.               },
  35.             },
  36.           },
  37.         },
  38.         minimizer: [
  39.           new UglifyPlugin({
  40.             uglifyOptions: {
  41.               warnings: false,
  42.               compress: {
  43.                 drop_console: true, // console
  44.                 drop_debugger: false,
  45.                 pure_funcs: ["console.log"], // 移除console
  46.               },
  47.             },
  48.           }),
  49.         ],
  50.       };
  52.       Object.assign(config, {
  53.         // 配置版本号
  54.         output: {
  55.           ...config.output,
  56.           filename: `static/js/[name].[chunkhash].${version}.js`,
  57.           chunkFilename: `static/js/[name].[chunkhash].${version}.js`,
  58.         },
  59.         // 开发生产共同配置
  60.         resolve: {
  61.           alias: {
  62.             "@": path.resolve(__dirname, "./src"),
  63.             "@c": path.resolve(__dirname, "./src/components"),
  64.             "@p": path.resolve(__dirname, "./src/pages"),
  65.           }, // 别名配置
  66.         },
  67.       });
  69.       // 安装gzip压缩 npm install -D compression-webpack-plugin
  70.       if (openGzip) {
  71.         config.plugins = [
  72.           ...config.plugins,
  73.           new CompressionPlugin({
  74.             test: /\.js$|\.html$|.\css/, //匹配文件名
  75.             threshold: 10240, //对超过10k的数据压缩
  76.             deleteOriginalAssets: false, //不删除源文件
  77.           }),
  78.         ];
  79.       }
  80.       // 外部扩展引入,同时需要在index.html中通过<script>引入对应的cdn链接
  81.       config.externals = {
  82.         AMap: "AMap",
  83.         vue: "Vue",
  84.         "vue-router": "VueRouter",
  85.         axios: "axios",
  86.       };
  87.     } else {
  88.       // 为开发环境修改配置...
  89.       config.mode = "development";
  90.     }
  91.   },
  92.   productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  93.   // css相关配置
  94.   css: {
  95.     extract: true, // 是否使用css分离插件 ExtractTextPlugin
  96.     sourceMap: false, // 开启 CSS source maps?
  97.     loaderOptions: {
  98.       css: {}, // 这里的选项会传递给 css-loader
  99.       postcss: {
  100.         // 配置pxtorem,需要npm安装pxtorem
  101.         plugins: [
  102.           require("postcss-pxtorem")({
  103.             //这里是配置项，详见官方文档
  104.             rootValue: 100, // 换算的基数
  105.             selectorBlackList: ["weui", "chart"], // 忽略转换正则匹配项，以这些开头的clss类名不会转化
  106.             propList: ["*"],
  107.             exclude: /node_modules,  /, //对该路径下的不去替换
  108.           }),
  109.         ],
  110.       }, // 这里的选项会传递给 postcss-loader
  111.     }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
  112.     modules: false, // 启用 CSS modules for all css / pre-processor files.
  113.   },
  114.   parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  115.   // pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  116.   // webpack-dev-server 相关配置
  117.   devServer: {
  118.     open: process.platform === "darwin",
  119.     host: "0.0.0.0", // 允许外部ip访问
  120.     port: 8022, // 端口
  121.     https: false, // 启用https
  122.     // 错误、警告在页面弹出
  123.     overlay: {
  124.       warnings: true,
  125.       errors: true,
  126.     },
  127.     // 代理转发配置，用于调试环境
  128.     proxy: {
  129.       "/api": {
  130.         target: "http://www.baidu.com/api",
  131.         changeOrigin: true, // 允许websockets跨域
  132.         // ws: true,
  133.         pathRewrite: {
  134.           "^/api": "",
  135.         },
  136.       },
  137.     },
  138.   },
  139.   // 第三方插件配置
  140.   pluginOptions: {},
  141. };