在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'
]
}
}
}
]
}
}