配置Vue CLI 中的Webpack 不需要從零編寫配置文件，因為其內(nèi)置了默認值，但可通過vue.config.js 進行擴展。 1. 使用vue.config.js 文件，通過configureWebpack 或chainWebpack 方法修改配置；2. 利用chainWebpack 修改loader 規(guī)則，如添加responsive-loader 處理圖片；3. 通過chainWebpack 添加自定義插件，如clean-webpack-plugin 清理構(gòu)建目錄；4. 在devServer 中設(shè)置代理等開發(fā)服務器選項以滿足調(diào)試需求。

配置Vue CLI 中的Webpack 其實並不需要你從零開始寫配置文件，因為Vue CLI 已經(jīng)內(nèi)置了合理的默認值。但如果你有定制化需求，比如修改打包規(guī)則、添加loader 或者調(diào)整輸出路徑，就需要通過Vue CLI 提供的方式去擴展Webpack 配置。

1. 使用vue.config.js

Vue CLI 允許你在項目根目錄創(chuàng)建一個vue.config.js文件來覆蓋默認的Webpack 配置。這是最常見也是推薦的做法。

你可以在這個文件中使用configureWebpack或chainWebpack方法來修改配置：

• configureWebpack ：適合直接合併或替換Webpack 配置對象。
• chainWebpack ：適合更細粒度地操作配置（比如添加/修改某個loader 或plugin）。

示例：

 // vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map',
    output: {
      filename: 'js/[name].[hash:8].js'
    }
  }
}

2. 修改Loader 規(guī)則

如果你想更改某個文件類型的處理方式，比如修改Babel 的編譯目標，或者為圖片添加新的loader，可以使用chainWebpack來操作對應的rule。

舉個例子，如果你想給圖片資源加上responsive-loader來生成響應式圖片：

 // vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('responsive-loader')
      .loader('responsive-loader')
      .options({
        // 配置參數(shù)name: 'img/[name].[hash:8].[width].[ext]'
      });
  }
}

注意：修改前最好先了解原始規(guī)則，避免衝突或重複加載。

3. 添加自定義插件

有時候你需要添加一些Webpack 插件，比如生成額外的HTML 頁面、清理構(gòu)建目錄等。

以添加clean-webpack-plugin為例：

首先安裝插件：

 npm install --save-dev clean-webpack-plugin

然後在vue.config.js中引入並使用它：

 const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  chainWebpack: config => {
    config.plugin('clean').use(CleanWebpackPlugin, []);
  }
}

這樣每次打包前都會自動清空輸出目錄。

4. 調(diào)整開發(fā)服務器設(shè)置

雖然不是Webpack 核心配置，但在開發(fā)時你可能也會想改一下devServer 設(shè)置，比如代理後端接口、開啟HTTPS 等。

例如設(shè)置代理：

 module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

這樣在請求/api/login時就會被代理到http://localhost:3000/login 。

基本上就這些。用好vue.config.js ，就可以滿足大多數(shù)項目的構(gòu)建和優(yōu)化需求了。不需要太深入Webpack 原理，也能完成常見的定制任務。

以上是如何在Vue CLI中配置WebPack？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！