文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在React.js中控制文件或文件夹名？

问如何在React.js中控制文件或文件夹名？
EN

Stack Overflow用户

提问于 2019-04-16 12:48:51

回答 1查看 2.6K关注 0票数 0

我使用的是Create React应用程序和Apache。我有一个缓存破坏的问题。当我每次更改代码并部署服务器，构建它时，chrome不会得到新代码，而是旧代码。所以我对它进行了搜索，发现了缓存崩溃导致的问题。我把下面的代码看作是一个解决方案。

<link rel="stylesheet" type="text/css" href="theme.css?version=20190416">

它是将版本写在文件名之后。但是我不知道如何应用上面的方法来反应。

这是我的react代码。

App.js

import React, {Component} from 'react';
import './App.css';
import {Route, Switch} from "react-router-dom";
import Homefrom "./page/Home";
import About from "./page/About";

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
             <Switch>
                 <Route exact path="/home" component={Home}/>
                 <Route exact path="/about" component={About}/>
             </Switch>
        );
    }
}

export default withRouter(App);

Root.js

const Root = () => {
return (
    <Router history={history}>
        <Route path="/" component={App}/>
    </Router>
);
};

export default Root;

index.js

import React from 'react';
import ReactDOM from 'react-dom'
import 'core-js';
import 'react-app-polyfill/ie11';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Root from "./Root";

ReactDOM.render(<Root/>, document.getElementById('root'));

serviceWorker.unregister();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React.js</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

我也读过如何在webpack.config.js文件中设置输出文件，但我不明白。谁来帮帮我。感谢您的阅读。

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-16 12:53:58

这个问题是因为你需要散列你的包，这样一旦你的浏览器发现散列发生了变化，它就会破坏缓存。在您的webpack配置中，您需要像这样设置输出属性：

output: {
   filename: "[name].[hash].js",
   chunkFilename: "[name].[hash].js"

其中filename是您从React生成的包，chunkFilename是代码的小代码，为了提高性能，webpack将其拆分到不同的文件中。在Apache方面，您需要确保无论何时发现get一个不同的文件名，都会破坏缓存，但我认为这是默认设置。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55700743

复制

相似问题

问如何在React.js中控制文件或文件夹名？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React.js中控制文件或文件夹名？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React.js中控制文件或文件夹名？
EN