vue-cli3搭建完整項目之webpack配置

前面篇介紹了項目初始化，下面就要開始對項目webpack進行配置，由於vue-cli3將webpack的基礎配置全部內嵌了，這就導致我們初始化項目完成之後發現原先的webpack的config配置全部都消失不見了，那該怎麼辦呢？別慌，vue-cli3早就考慮到了這一點，它預留了一個vue.config.js的js文件供我們對webpack進行自定義配置。

vue.config.js官方配置指南

一、在項目根目錄下新建vue.config.js文件與package.json同級

下面是我的vue.config.js文件,裏面有詳細的註釋，這裏不再贅述

const path = require('path')

module.exports = {
  publicPath: './', // 基本路徑
  outputDir: 'dist', // 輸出文件目錄
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack配置
  chainWebpack: (config) => {
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
      config.mode = 'production'
    } else {
      // 爲開發環境修改配置...
      config.mode = 'development'
    }
    Object.assign(config, {
      // 開發生產共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 別名配置
      }
    })
  },
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  // css相關配置
  css: {
    extract: true, // 是否使用css分離插件 ExtractTextPlugin
    sourceMap: false, // 開啓 CSS source maps?
    loaderOptions: {
      css: {}, // 這裏的選項會傳遞給 css-loader
      postcss: {} // 這裏的選項會傳遞給 postcss-loader
    }, // css預設器配置項 詳見https://cli.vuejs.org/zh/config/#css-loaderoptions
    modules: false // 啓用 CSS modules for all css / pre-processor files.
  },
  parallel: require('os').cpus().length > 1, // 是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅作用於生產構建。
  pwa: {}, // PWA 插件相關配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  // webpack-dev-server 相關配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0', // 允許外部ip訪問
    port: 8022, // 端口
    https: false, // 啓用https
    overlay: {
      warnings: true,
      errors: true
    }, // 錯誤、警告在頁面彈出
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/api',
        changeOrigin: true, // 允許websockets跨域
        // ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } // 代理轉發配置，用於調試環境
  },
  // 第三方插件配置
  pluginOptions: {}
}

二、優化打包chunk-vendors.js文件體積過大

當我們運行項目並且打包的時候，會發現chunk-vendors.js這個文件非常大，那是因爲webpack將所有的依賴全都壓縮到了這個文件裏面，這時我們可以將其拆分，將所有的依賴都打包成單獨的js。

在生產環境下配置，代碼如下

configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
      config.mode = 'production'
      // 將每個依賴包打包成單獨的js文件
      let optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 爲開發環境修改配置...
      config.mode = 'development'
    }
    Object.assign(config, {
      // 開發生產共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 別名配置
      }
    })
  }

至此，打包優化結束，運行打包，你會發現原先的vender文件沒有了，同時多了好幾個依賴的js文件

三、打包時去除打印信息（console）

下載uglifyjs-webpack-plugin

npm install --save-dev uglifyjs-webpack-plugin

在vue.config.js文件中引入，並在configureWebpack的optimization中添加如下代碼

const UglifyPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    ...
 configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
      config.mode = 'production'
      // 將每個依賴包打包成單獨的js文件
      let optimization = {
        ...
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, // console
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 爲開發環境修改配置...
      config.mode = 'development'
    }
    ...
  },
    ...
}

運行打包，你會發現我們在頁面中寫的那些打印日誌的代碼都消失了

完整代碼如下：

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  publicPath: './', // 基本路徑
  outputDir: 'dist', // 輸出文件目錄
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack配置
  chainWebpack: (config) => {
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
      config.mode = 'production'
      // 將每個依賴包打包成單獨的js文件
      let optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        },
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, // console
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 爲開發環境修改配置...
      config.mode = 'development'
    }
    Object.assign(config, {
      // 開發生產共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 別名配置
      }
    })
  },
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  // css相關配置
  css: {
    extract: true, // 是否使用css分離插件 ExtractTextPlugin
    sourceMap: false, // 開啓 CSS source maps?
    loaderOptions: {
      css: {}, // 這裏的選項會傳遞給 css-loader
      postcss: {} // 這裏的選項會傳遞給 postcss-loader
    }, // css預設器配置項
    modules: false // 啓用 CSS modules for all css / pre-processor files.
  },
  parallel: require('os').cpus().length > 1, // 是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅作用於生產構建。
  pwa: {}, // PWA 插件相關配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  // webpack-dev-server 相關配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0', // 允許外部ip訪問
    port: 8022, // 端口
    https: false, // 啓用https
    overlay: {
      warnings: true,
      errors: true
    }, // 錯誤、警告在頁面彈出
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/api',
        changeOrigin: true, // 允許websockets跨域
        // ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } // 代理轉發配置，用於調試環境
  },
  // 第三方插件配置
  pluginOptions: {}
}

注：如需其他的配置可在上方官網配置指南中查找相關配置

vue-cli3搭建項目之webpack配置

vue-cli3搭建完整項目之webpack配置

一、在項目根目錄下新建vue.config.js文件與package.json同級

二、優化打包chunk-vendors.js文件體積過大

在生產環境下配置，代碼如下

三、打包時去除打印信息（console）

完整代碼如下：

vue-cli3搭建項目之項目初始化配置

vue-cli3搭建項目之webpack配置

vue入門

angular入門2

angular入門1

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

vue-cli3搭建項目之webpack配置

vue-cli3搭建完整項目之webpack配置

一、在項目根目錄下新建vue.config.js文件與package.json同級

二、優化打包chunk-vendors.js文件體積過大

​ 在生產環境下配置，代碼如下

三、打包時去除打印信息（console）

完整代碼如下：

在生產環境下配置，代碼如下