問題描述

有個(gè)vux的項(xiàng)目，有些JS，我故意放在static的目錄里面，然后使用require來獲取，該JS內(nèi)容如下：

var sysNavDefine = { name: ’sysNavDefine’, navList: [ { path: ’/listView’, name: ’listView’, imgSrc: ’../../static/images/home/email.png’, desc: ’網(wǎng)絡(luò)通訊’, query: {tableName: ’EmailDet’,tableAlias: ’InBox’,pageSize: 20,pageIndex: 1 }}, { path: ’/listView’, name: ’listView’, imgSrc: ’../../static/images/home/wfCurrentStep.png’, desc: ’審批任務(wù)’, 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里面的時(shí)候，webpack打包，就是：npm run build，沒有問題。在使用的過程中，我修改了這個(gè)sysNav.js，但是，不管如何清理緩存，都是舊的內(nèi)容，就好像不知道哪里緩存了一樣。我是希望可以通過動(dòng)態(tài)修改這個(gè)文件，讓我可以更新部分內(nèi)容。或者說，如何讓require可以每次都讀取最新的內(nèi)容。

問題解答

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

你watch了才會(huì)更新，不watch怎么會(huì)自動(dòng)更新。

是不是我說的太復(fù)雜了，其實(shí)重現(xiàn)這個(gè)問題很簡單。

新建一個(gè)vue的項(xiàng)目，在static里面放入一個(gè)js，然后，在vue里面require這個(gè)js，例如alert一下。

npm run build，把dist里面的內(nèi)容，都拷貝到web服務(wù)器，修改static里面的js的內(nèi)容，你會(huì)發(fā)現(xiàn)，這個(gè)內(nèi)容不會(huì)生效。

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

經(jīng)過實(shí)際測試，發(fā)現(xiàn)只要require一個(gè)js，webpack就會(huì)把這個(gè)js直接打包到app.js里面，然后static里面的內(nèi)容是原封不動(dòng)的直接拷貝到dist目錄。我在app.js里面找到了測試的代碼了。