javascript - When webpack is packaging, js is deliberately placed in static. The replacement does not take effect after publishing.

Question

There is a vux project. I deliberately placed some JS in the static directory, and then used require to obtain it. The content of the JS is as follows:

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

Use this in vue:

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

The problem is, when it is placed in static, webpack packaging is: npm run build, there is no problem. During the use, I modified this sysNav.js, but no matter how I clean the cache, it is still the old content, as if I don’t know where it is cached. I hope that by dynamically modifying this file, I can update part of the content. In other words, how to make require read the latest content every time.

Answer 1

Configure devServer or webpack-dev-middleware webpack-hot-middleware

Answer 2

It will be updated only if you watch it. How can it be updated automatically if you don’t watch it?

Answer 3

Did I say it was too complicated? In fact, it is very simple to reproduce this problem.

Create a new vue project, put a js in static, and then require the js in vue, for example, alert.

npm run build, copy the content in dist to the web server, modify the content of js in static, you will find that this content will not take effect.

Okay, question? Since as long as a js is required, the js will be packaged. Why do I still see this js in the static directory? ? Aren’t you deceiving yourself and others? ?

---

After actual testing, we found that as long as a js is required, webpack will package the js directly into app.js, and then the content in static will be copied directly to the dist directory intact. I found the test code in app.js.

---