vue-cli腳手架build目錄中的webpack.dev.conf.js配置文件

時間 2019-11-20

標籤 vue cli 腳手架 build 目錄 webpack.dev.conf.js webpack dev conf 配置文件欄目 JavaScript 简体版

原文原文鏈接

此文章用來解釋vue-cli腳手架build目錄中的webpack.dev.conf.js配置文件

此配置文件是vue開發環境的wepack相關配置文件
關於註釋
- 當涉及到較複雜的解釋我將經過標識的方式(如（1）)將解釋寫到單獨的註釋模塊，請自行查看
上代碼

// 引入當前目錄中的utils工具配置文件
// 請自行查看我博客中的utils.js的相關文章
var utils = require('./utils')
// 引入webpack來使用webpack內置插件
var webpack = require('webpack')
// 引入config目錄中的index.js配置文件
var config = require('../config')
// 引入webpack-merge插件用來合併webpack配置對象，也就是說能夠把webpack配置文件拆分紅幾個小的模塊，而後合併
var merge = require('webpack-merge')
// 引入當前目錄下的webpack.base.conf.js配置文件，主要配置的是打包各類文件類型的配置
// 請自行查看我博客的相關文章
var baseWebpackConfig = require('./webpack.base.conf')
// 下面是一個自動生成html的插件，可以把資源自動加載到html文件中
// 詳情請看 (1)
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 下面這個插件是用來把webpack的錯誤和日誌收集起來，漂亮的展現給用戶
// 詳情請看 (2)
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
// Object.keys(obj) 是取對象的索引，並放在一個數組裏面的方法
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
    // 下面這個結果就是把webpack.base.conf.js中的入口entry改爲以下配置
    // app: ['./build/dev-client','./src/main.js']
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
// 下面是合併配置對象，將這個配置文件特有的配置添加替換到base配置文件中
module.exports = merge(baseWebpackConfig, {
    module: {
        // 下面是把utils配置中的處理css相似文件的處理方法拿過來，而且不生成cssMap文件
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    // cheap-module-eval-source-map is faster for development
    // debtool是開發工具選項，用來指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性價比最高
    devtool: '#cheap-module-eval-source-map',
    plugins: [
        // DefinePlugin內置webpack插件，專門用來定義全局變量的，下面定義一個全局變量 process.env 而且值是以下
        /*  'process.env': {
                NODE_ENV: '"development"'
            } 這樣的形式會被自動轉爲
            'process.env': '"development"' 
            各位騷年看好了，development若是不加雙引號就當作變量處理，程序會報錯
        */
        new webpack.DefinePlugin({
            'process.env': config.dev.env
        }),
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        // 下面這個插件HotModuleReplacementPlugin能夠說是博大精深沒有幾我的弄透的，包括我在內，
        // 詳情見(3)
        new webpack.HotModuleReplacementPlugin(),
        // 下面這個插件比較簡單，就是當webpack編譯錯誤的時候，來中端打包進程，防止錯誤代碼打包到文件中，你還不知道
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        // 下面這個插件介紹過了
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true  -> 設置爲true表示把全部的js文件都放在body標籤的屁股
        }),
        // 使用FriendlyErrorsPlugin插件，介紹過了，這個插件的其餘細節還設置在dev-server-js文件中
        new FriendlyErrorsPlugin()
    ]
})

解釋

(1)html-webpack-plugin插件是用來生成html文件的，有很靈活的配置項，下面是基本的一些用法
plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html 
    new HtmlWebpackPlugin({  // Also generate a test.html 
      filename: 'test.html', // 生成的文件的名稱
      title: 'Custom template', // 文件的標題
      template: 'my-index.ejs' //能夠指定模塊html文件
    })
]
下面是模板文件my-index.ejs的內容 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title> //這裏使用特殊的表示插入配置項的title
  </head>
  <body>
  </body>
</html>
(2)friendly-errors-webpack-plugin插件，把webpack編譯出來的錯誤展現給咱們，方便調試
   安裝 npm install friendly-errors-webpack-plugin --save-dev
   基本使用 
   plugins: [
       new FriendlyErrorsWebpackPlugin(),
   ]
   注意點，使用這個插件要遵照下點
       您須要關閉全部的錯誤日誌記錄，將webpack配置靜默選項設置爲true
       也就是遵循如下三點便可
       在使用webpack-dev-middleware插件，關於這個插件的解釋在個人dev-sever-js配置文件中有解釋，設置如下內容
        app.use(require('webpack-dev-middleware')(compiler, {
            quiet: true, // 必須設置
            publicPath: config.output.publicPath,
        }));
       使用webpack-dev-server時設置以下
       {
           devServer: {
               quiet: true
           }
       }
       使用webpack-hot-middleware中間件，關於這個插件的解釋也在個人dev-server-js文章中
        app.use(require('webpack-hot-middleware')(compiler, {
            log: () => {}
        }));
    作到以上幾點，就能夠正常使用這個插件了，這個插件還有一些配置項，感興趣自行了解
(3) HotModuleReplacementPlugin解釋以下
    老哥們知道什麼是webpack模塊不
    webpack支持以下模塊
        CoffeeScript
        TypeScript
        ESNext (Babel)
        Sass
        Less
        Stylus
    這些模塊支持以下導入的方式
        ES2015 import 語句
        CommonJS require() 語句
        AMD define 和 require 語句
        css/sass/less 文件中的 @import 語句。
        樣式(url(...))或 HTML 文件(<img src=...>)中的圖片連接(image url)
    看到了把，webpack就是這麼強大，幾乎囊括了前端全部的東西
    這個插件的做用就是當你的程序在運行時，而你如今要替換、添加或刪除某個模塊，又不想從新加載頁面，
    這個插件幫助你實現無刷新加載，關於內部實現原理，其實有點意思，各位請自行查看