webpack手動配置筆記

jinlong_zhang發表於2019-04-03
原文網址 : https://juejin.im/post/5ca49de26fb9a05e15300d8b
Web筆記

前言：

很多時候，到了專案的中後期，隨著業務的增加，我們對於構建和系統效能，都會出現一些痛點，所以瞭解webpack的組成部分，以及細枝末葉很是重要，這為後期的優化和重構等有很好的益處，下面以vue的腳手架專案開始

腳手架

通過 @vue/cli 搭建互動式的專案腳手架。 webpack建立專案

vue init webpack my-vue
複製程式碼

根據需要安裝，建議都進行安裝

webpack手動配置筆記
當看到這個，表示安裝成功

webpack手動配置筆記
按提示執行專案

npm run dev
複製程式碼

當看到這個表明，啟動成功

webpack手動配置筆記
瀏覽器，輸入http://localhost:8080/
webpack手動配置筆記
專案有了，下面進入今天討論的主題

webpack配置

定位到config下的index.js，這個檔案就是今天的主角

webpack手動配置筆記
看下里面都有哪些東西

裡面主要分，開發（dev）和構建（build）兩部分

webpack手動配置筆記

開發（dev）與構建（build）

'use strict'

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static', // 檔案存放的位置
    assetsPublicPath: '/', // 資源根目錄
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // 本地host
    port: 8080, // 埠
    autoOpenBrowser: false, // 是否自動開啟瀏覽器，預設不自動開啟
    errorOverlay: true, // 錯誤覆蓋
    notifyOnErrors: true, // 錯誤通知
    poll: false, // 沒什麼用

    // 控制檯顯示錯誤和警告 監測es語法
    useEslint: true,
    // 如果為true es檢查和警告將被覆蓋，所以這邊最好為false
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    cacheBusting: true,
    // 壓縮css
    cssSourceMap: true
  },

  build: {
    // 構建生成的檔案
    index: path.resolve(__dirname, '../dist/index.html'),

    // 構建路徑
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static', // 生成的目標子檔案
    assetsPublicPath: '/', // 專案的根目錄

    productionSourceMap: true, // 生產環境壓縮
    devtool: '#source-map', // 打包壓縮工具

    // 如果為true要安裝webpack外掛
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false, // 生產Gzip檔案壓縮，一般預設為false
    productionGzipExtensions: ['js', 'css'], // 生產Gzip壓縮擴充套件，對js，css壓縮

    // `npm run build --report`
    bundleAnalyzerReport: process.env.npm_config_report // 執行構建包視覺化分析圖
  }
}
複製程式碼

總結

webpack是為了更好的打包瀏覽器能夠識別的語言，針對效能的優化還需要細看相關的引數，根據業務場景進行權衡

相關文章