watch
监听文件变化来进行webpack打包
watch:true,
watchOptions:{ // 监控选项
poll:1000, // 每秒问我1000次
aggregateTimeout:500, // 防抖
ignored:/node_modules/ // 不监控的文件
}
复制代码
多页
module.exports = {
entry:{
index:'./src/index.js',
other:'./src/other.js'
},
output:{
filename:[name].[hash:8].js,
path:path.resolve('./dist')
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['index']
}),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'other.html',
chunks:['other']
})
]
}
复制代码
resolve
解析第三方模块,定义别名、查找后缀等配置。
module.exports = {
resolve:{
modules: [path.resolve('node_modules')], // 第三方模块的解析文件夹
//mainFiles:['a.js','index.js'], // 入口文件的配置
//mainFields:['style','main'],// 入口字段的配置
alias: { // 别名
'bootstrap': 'bootstrap/dist/css/bootstrap.css'
},
// 配置我们的后缀
extensions: ['.js', '.json', '.css']
}
}
复制代码
noParse
如果当前模块没有依赖项了,可以配置此项来不在进行解析
module:{
noParse:/jquery/ // 如果确定没有依赖的可以加载这里
}
复制代码
IgnorePlugin
忽略插件的某些包
// 如果 发现moment中引入了 locale那就忽略掉
new webpack.IgnorePlugin(/\.\/locale/,/moment/),
复制代码
DefinePlugin
定义一些常量
new webpack.DefinePlugin({
// 定义的变量 需要用json.stringfy包裹
DEV:JSON.stringify('development'), // console.log("development"),
EXPRESSION:'1+1',
FLAG:'true' ,//console.log(true)
}),
复制代码
webpack-merge
合并文件,开发环境和生产环境分开配置。
let base = require('./webpack.base.js');
let merge = require('webpack-merge');
let dev = {
mode:'development'
}
module.exports = merge(base, dev);
复制代码
webpack-dev-middleware
服务端打包
let express = require('express');
let webpack = require('webpack')
let config = require('./webpack.config.js');
let compiler = webpack(config); // 产生编译
// 在后端中 引入webpack 启动服务
let middle = require('webpack-dev-middleware');
let app = express();
app.use(middle(compiler));
app.get('/api/user',async (req,res)=>{
res.json({name:'zfpx'});
})
app.listen(3000);
复制代码
cleanWebpackPlugin、copyWebpackPlugin、BannerPlugin
清空文件、拷贝文件、文件签名
new CleanWebpackPlugin(['./dist']),
new CopyWebpackPlugin([{ // 拷贝静态资源插件
from:'./assets',
to:'./'
}]),
new webpack.BannerPlugin('make by xx in 2019'),
复制代码
proxy代理配置、before钩子mock假数据
//可以mock 自己的数据
before(app){ // 默认webpack-dev-server 启动的时候 会调用这样的before钩子 , app 是 我们 express()
app.get('/api/user',(req,res)=>{
res.json({name:'jw'});
})
}
//前端 会用nginx
proxy:{ // 只对开发的时候有效
'/api':{
target:'http://localhost:3000',
pathRewrite:{
'/api':''
}
}
}
复制代码
devtool
- source-map 生成一个源文件的映射,反映报错信息。
- cheap-module-source-map 没有列信息
- eval-source-map 会打包在当前文件中
- cheap-module-eval-source-map 文件中没有列信息
devtool:'source-map', // 告诉webpack 生成一个map,会标识源码中哪行哪列报错了
devtool:'cheap-module-eval-source-map', // 是一个在文件中的source-map 没有列
devtool:'eval-source-map', // 当前打包的js中
devtool:'cheap-module-source-map'
watch:true, // 监听打包 babel --watch
watchOptions:{ // 监控的选项
poll:1000, // 以秒为单位 轮询
// 防抖 只要不停的触发事件只执行最后一次 节流 每隔多少ms 触发一次
aggregateTimeout:2000,
ignored:/node_modules/
},
复制代码