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/ },复制代码