module.exports = { watch: true, watchOptions: { poll: 1000, // 每隔一秒轮询一次文件是否产生变革 aggregateTimeout: 1000, // 当第一个文件变动，会在从头构建前增加延迟。这个选项答允 webpack 将这段时间内举办的任何其他变动都聚合到一次从头构建里 ignored: /node_modules/ // 解除一些文件的监听 } }
四、三个常见小插件的利用
1、clean-webpack-plugin: 其浸染就是每次打包前先先将输出目次中的内容举办清空，然后再将打包输出的文件输出到输出目次中。
const {CleanWebpackPlugin} = require("clean-webpack-plugin"); module.exports = { plugins: [ new CleanWebpackPlugin() // 打包前清空输出目次 ] }
需要留意的是，require("clean-webpack-plugin)的功效是一个工具而不是类，这个工具中的 CleanWebpackPlugin 属性才是一个类，我们就是用这个类去建设插件工具。
2、copy-webpack-plugin: 其浸染就是打包的时候带上一些 readMe.md、history.md 等等一起输出到输出目次中。
module.exports = { plugins: [ new CopyWebpackPlugin([ { from: "./readMe.md", // 将项目根目次下的readMe.md文件一起拷贝到输出目次中 to: "" // 属性值为空字符串则暗示是输出目次 } ]) ] }
3、BannerPlugin: 其浸染就是在打包输出的 js 文件的头部添加一些文字注释，好比版权说明等等，BannerPlugin 是 webpack 内置的插件，如:
module.exports = { plugins: [ new webpack.BannerPlugin("Copyright © 2019") // 在js文件头部添加版权说明 ] }
五、webpack 跨域问题
为什么 webpack 会存在跨域问题？因为 webpack 打包的是前端代码，其最终会被陈设到前端处事器上，而前后端代码凡是陈设在差异的处事器上，纵然是陈设在同一个处事器上，所利用的端口也是纷歧样的，当前端代码通过 ajax 等手段向后端处事器获取数据的时候，由于前后端代码不在同一个域中，故存在跨域问题。
好比，我们通过 webpack 的 devServer 来运行陈设我们的前端应用代码，devServer 启动在 8080 端口上，而前端应用代码中会通过 ajax 请求后端数据，后端处事器启动在 3000 端口上。
// index.js const xhr = new XMLHttpRequest(); // xhr.open("get", "http://localhost:3000/api/test"); // 由于跨域问题无法直接会见到:3000下的资源 xhr.open("get", "/api/test"); // 原来是要会见:3000/api/test xhr.onreadystatechange = () => { if (xhr.readyState === 4) { console.log(xhr.responseText); } } xhr.send();
由于前端代码是运行在欣赏器中的，假如在前端代码中直接通过 ajax 向:3000/api/test 提倡请求获取数据，那么由于欣赏器同源计策的影响，会存在跨域的问题，所以必需会见 /api/test。可是这样会见又会呈现 404 问题，因为其实会见的是 :8080/api/test，8080 处事器上是没有该资源的，办理步伐就是通过 devServer 设置一个署理处事器
module.exports = { devServer: { proxy: { "/api": "http://localhost:3000" // 路径以/api开头则署理到localhost:3000上 } } }
会见 :8080/api/test
就会被署理到:3000/api/test 上，proxy 还支持路径的重写，假如 3000 端口处事器上并没有 /api/test 路径，只有 /test 路径，那么就可以对路径举办重写，将 /api 替换掉
module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:3000", pathRewrite: {"/api": ""} // 将/api替换掉 } } } }
会见 :8080/api/test
就会被署理到 :3000/test 上
假如前端只是想 mock 一些数据，并不需要真正的去会见靠山处事器，那么我们可以通过 devServer 提供的 before 钩子函数获取到内置的处事器工具举办处理惩罚请求，这个内置的处事器工具就是 webpack 的 devServer 即 8080 端口的 server，因为是在同一个处事器中请求数据所以也不会呈现跨域问题。
before(app) { // 此app即webpack的devServer app.get("/api/test", (req, res, next) => { res.json({name: "even"}); }) }
我们还可以不通过 webpack 提供的 devServer 来启动 webpack，而是利用本身处事器来启动 webapck。
const express = require("express"); const app = express(); const webpack = require("webpack"); // 引入webpack const config = require("./webpack.config.js"); // 引入设置文件 const compiler = webpack(config); // 建设webpack的编译器 const middleWare = require("webpack-dev-middleware"); //引入webpack的中间件 app.use(middleWare(compiler)); // 将compiler编译器交给中间件处理惩罚 app.get("/api/test", (req, res, next) => { res.json({name: "lhb"}); }); app.listen(3000);
通过自界说处事器启动 webpack，这样 webpack 中的前端代码请求数据就和处事器的资源在同一个域中了。
六、resolve 设置
resolve 用于设置模块的理会相关参数的，其属性值为一个工具。