前言

Webpack 是一個現代 JavaScript 應用程式的模組打包器 (module bundler) 。當 Webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖，其中包含應用程式需要的每個模組，然後將所有這些模組打包成少量的 bundle - 通常只有一個，由瀏覽器載入。

Webpack 4 正式版剛釋出的時候，覺得會有坑就先不用，現在釋出已經大半年了，版本都到 webpack 4.15.1了，且 vue-cli 都到 3.0.3 了，所以是時候玩轉一下 vue-cli 3 和 webpack 4 的新特性了。

1. vue-cli 3.0.3

以下的安裝都是在 macOS 的環境下進行的，當然在 windows 和 linus 下也同理。

1.1 安裝

vue cli 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它。

可以使用下列任一命令安裝這個新 vue-cli 3.0.3 的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你還可以用這個命令來檢查其版本是否正確 (3.x)：

vue --version

或者：

vue -V

1.2使用圖形化介面

你也可以通過 vue ui 命令以圖形化介面建立和管理專案：

vue ui

上述命令會開啟一個瀏覽器視窗，並以圖形化介面將你引導至專案建立的流程。

1.3 建立專案

1.3.1 預設型

• 新建資料夾，在該資料夾下開啟命令視窗，輸入以下命令進行新建專案，當然我起的專案名字叫 vue-webpack-demo

vue create vue-webpack-demo

• 會讓你選擇預設（default）還是手動（Manually），（注：現在vue-cli3.0預設使用yarn下載）。

• 先是預設的，一路回車後的專案目錄如下：

• 再來手動的，我起的專案名字叫 vue-webpack-demo2，如下圖，讓你選擇那些選項，按 空格鍵 是選擇單個，a 鍵 是全選。

• 我選擇了常用的如下選項：

• vue-router 預設 hash 模式，所以我選擇預設的，選擇了 n ，而不是 history 模式：

• 下一步之後問詢問你安裝哪一種 CSS 預處理語言，我是選擇了用的 less。

• 這個是問你選擇哪個自動化程式碼格式化檢測，配合 vscode 編輯器的，Prettier - Code formatter外掛，我選的隨後一個。

• 第一個是儲存就檢測，第二個是 fix 和 commit 的時候檢查。

• 選擇單元測試解決方案，Mocha是流行的JavaScript測試框架之一，通過它新增和執行測試，從而保證程式碼質量，chai 是斷言庫，我兩個都選擇了。

• 上邊這倆意思問你像，babel, postcss, eslint 這些配置檔案放哪？第一個是：放獨立檔案放置，第二個是：放package.json裡，這裡小汪選擇放單獨配置檔案，選第一個

• 下面倒數第二行問你是否將以上這些將此儲存為未來專案的預配置嗎 ？選擇是的時候，下次建立專案時，可以選擇剛剛配置好的配置，不用再每個都配置一遍。最後一個是選擇的名字，你隨意選擇，點選確定就開始下載模板了。

• 再建立專案的時候，剛剛配置好的選擇的名字 vue-webpack4 會這樣子出現：

• 啟動命令

// 1. 進入專案
cd vue-webpack-demo 
// 或者 cd vue-webpack-demo2
// 2. 安裝依賴
npm i
// 3. 啟動
npm run serve

1.4 專案改變

1. 相比 vue-cli 2.X 建立的目錄，vue-cli 3.0 建立的目錄看不見 webpack 的配置

1. 啟動命令列由：

npm run dev 或者 npm start

改變為：

npm run serve

1. 安裝過程也發生了一些變化，配置可以儲存，下次可以再用，像前面的 vue-webpack4。
2. 手動配置 webpack：在根目錄下新建一個 vue.config.js 檔案，進行你的配置 :

const path = require('path');

module.exports = {
    // 基本路徑
    baseUrl: './',
    // 輸出檔案目錄
    outputDir: 'dist',
    // eslint-loader 是否在儲存的時候檢查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    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')
                }
            }
        });
    },
    // 生產環境是否生成 sourceMap 檔案
    productionSourceMap: true,
    // css相關配置
    css: {
        // 是否使用css分離外掛 ExtractTextPlugin
        extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {},
        // 啟用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // PWA 外掛相關配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相關配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        // proxy: {
        //     // 設定代理
        //     // proxy all requests starting with /api to jsonplaceholder
        //     'http://localhost:8080/': {
        //         target: 'http://baidu.com:8080', //真實請求的目標地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^http://localhost:8080/': ''
        //         }
        //     }
        // },
        before: (app) => {}
    },
    // 第三方外掛配置
    pluginOptions: {
        // ...
    }
};

1. 當然如果你不想用3.0的話，還是可以繼續使用2.0的, 官方文件是這樣說的：

踩坑記

1. npm 的全域性路徑被修改了

我都不記得在裝什麼包的時候修改了 mac 中 npm 的全域性路徑了，平時 npm 執行各種命令不報錯。

全域性解除安裝 vue-cli 命令列：

npm uninstall vue-cli -g;

但是今天全域性解除安裝 vue-cli 的時候一直不成功，搞了一個小時，結果看了一下 npm 的全域性路徑，才發現路徑不對！！！

如果你的 npm 的全域性路徑也變了，請按如下步驟修改加預設的。

方法一：

原因：npmr 的配置改變了，導致正確的 npmr 不能用。

• 開啟終端，切換到根路徑

cd 

open .npmrc 

• 檔案裡面修改為 prefix=/usr/local

方法二：

npm config set prefix /usr/local  //是預設路徑 修改了路徑會出現錯誤。

按上面的方法修改完，再全域性解除安裝 vue-cli 果然就成功了。

最後

你以為本文就這麼結束了 ? 精彩在後面 ！！！

對 全棧開發 有興趣的朋友可以掃下方二維碼關注我的公眾號

我會不定期更新有價值的內容。

微信公眾號：愛寫bugger的阿拉斯加分享 前端開發、後端開發 等相關的技術文章，熱點資源，全棧程式設計師的成長之路。

關注公眾號並回復 福利 便免費送你六套視訊資源，絕對乾貨。