問題描述

有個vux的項目，有些JS，我故意放在static的目錄里面，然后使用require來獲取，該JS內容如下：

var sysNavDefine = { name: ’sysNavDefine’, navList: [ { path: ’/listView’, name: ’listView’, imgSrc: ’../../static/images/home/email.png’, desc: ’網絡通訊’, query: {tableName: ’EmailDet’,tableAlias: ’InBox’,pageSize: 20,pageIndex: 1 }}, { path: ’/listView’, name: ’listView’, imgSrc: ’../../static/images/home/wfCurrentStep.png’, desc: ’審批任務’, query: {tableName: ’wfCurrentStep’,tableAlias: ’’,pageSize: 20,pageIndex: 1 }} ]}export default sysNavDefine

在vue里面這樣使用：

var sysNav = require('../../static/modules/sysNav.js')this.$data.navList = sysNav.default.navList

問題來了，放在static里面的時候，webpack打包，就是：npm run build，沒有問題。在使用的過程中，我修改了這個sysNav.js，但是，不管如何清理緩存，都是舊的內容，就好像不知道哪里緩存了一樣。我是希望可以通過動態修改這個文件，讓我可以更新部分內容。或者說，如何讓require可以每次都讀取最新的內容。

問題解答

配置 devServer 或者 webpack-dev-middleware webpack-hot-middleware

你watch了才會更新，不watch怎么會自動更新。

是不是我說的太復雜了，其實重現這個問題很簡單。

新建一個vue的項目，在static里面放入一個js，然后，在vue里面require這個js，例如alert一下。

npm run build，把dist里面的內容，都拷貝到web服務器，修改static里面的js的內容，你會發現，這個內容不會生效。

好了問題來？既然只要require一個js，就會把js打包進去。為什么還會在static目錄里面看到這個js？？豈不是自欺欺人了嗎？？

經過實際測試，發現只要require一個js，webpack就會把這個js直接打包到app.js里面，然后static里面的內容是原封不動的直接拷貝到dist目錄。我在app.js里面找到了測試的代碼了。