11、webpack 監(jiān)聽watch

在webpack中可以配置watch監(jiān)聽器時時打包:

  • 1、配置如下:
module.exports = {
    watch: true,
    watchOptions: {
      poll: 1000, // 每秒詢問多少次
      aggregateTimeout: 500,  //防抖 多少毫秒后再次觸發(fā)
      ignored: /node_modules/ //忽略時時監(jiān)聽
    }
}

webpack.config.js完整配置:

//  webpack是node寫出來的, 需要node的寫法
let path = require('path');
// path.resolve 相對路徑轉(zhuǎn)成絕對路徑
// console.log(path.resolve('dist'));
// 以當(dāng)前目錄
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');


// webpack相關(guān)配置
module.exports = {
    // 開發(fā)服務(wù)的配置
    devServer: {
        // 端口,默認(rèn)8080
        port: '8099',
        // 進(jìn)度條
        progress: true,
        // 啟動后訪問目錄,默認(rèn)是項目根目錄,這個設(shè)置到打包后目錄
        contentBase: './build',
        // 啟動壓縮
        //compress: true
    },
    // 模式,2種:生產(chǎn)模式(production)和開發(fā)模式(development)
    // 開發(fā)模式不壓縮打包后代碼,生產(chǎn)模式壓縮打包后代碼
    mode: 'production',
    // 1、source-map:產(chǎn)生文件,產(chǎn)生行列
    // devtool: 'source-map',
    // 2、eval-source-map:不產(chǎn)生文件,產(chǎn)生行類
    //devtool: 'eval-source-map',
    // 3、cheap-source-map:產(chǎn)生文件,不產(chǎn)生列
    //devtool: 'cheap-module-source-map',
    // 4、cheap-module-eval-source-map:不產(chǎn)生文件,不產(chǎn)生列
    //devtool: 'cheap-module-eval-source-map',

    // 監(jiān)聽
    watch: true,
    watchOptions: {
        poll: 1000, // 每秒詢問多少次
        aggregateTimeout: 500,  //防抖 多少毫秒后再次觸發(fā)
        ignored: /node_modules/ //忽略時時監(jiān)聽
    },

    // 入口,表示從哪里開始打包
    entry: {
        home: './src/index.js'
    }, 
    // 表示出口(輸出后文件相關(guān)配置)
    output: {   
        // 打包后的文件名 多入口根據(jù)入口名稱生成
        filename: 'build.js',  
        // 輸出后的路徑(必須是一個絕對路徑)
        path: path.resolve(__dirname, 'dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html'
        })
    ],
    module: {
        // loader
        rules: [
            {
                test: /\.js$/, //匹配js文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
     }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 目錄第1章 webpack簡介 11.1 webpack是什么? 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,751評論 0 1
  • 在現(xiàn)在的前端開發(fā)中,前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,478評論 1 32
  • 全局安裝webpack 全局安裝webpack會有個問題,就是當(dāng)你有兩個項目依賴于不同版本的webpack,就會有...
    説好的妹紙呢閱讀 1,852評論 0 11
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,314評論 4 31
  • 摩天高樓大廈一角,隱藏在樹叢矮洼下,有一排不起眼的小二樓簡易房,應(yīng)該是某個工程隊的臨時住房,天藍(lán)色的板房有點(diǎn)像集裝...
    你在微笑嗎閱讀 162評論 0 0