当代码更改时,webpack热加载器会重新编译,但不会反映在输出中(app.js)

时间:2019-07-27 04:27:10

标签: javascript

如果我修改jsx文件 Webpack由hotloader重新编译

,但未反映在输出文件中 输出与以前相同。

但是我不知道设置哪里出错了。

也许webpeck.config.js设置错误?

C:\ react_game_prac2 \ client.jsx

const WordRelay = require('./WordRelay');
const { hot } = require('react-hot-loader/root')
const React = require('react');
const ReactDom = require('react-dom');

const Hot = hot(WordRelay);

ReactDom.render(<Hot /> , document.querySelector('#root'));

C:\ react_game_prac2 \ index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>last word relay</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./dist/app.js"></script>
    </body>
</html>

C:\ react_game_prac2 \ WordRelay.jsx

const React = require('react');
const { Component } = React;

class WordRelay extends Component {
    state = {
        word:'기차2',
        value:'',
        result:'',
    };

    onSubmitForm = (e) => {
        e.preventDefault();
        if (this.state.word[this.state.word.length-1] === this.state.value[0]) {
            this.setState({
                result:'딩동댕',
                word:this.state.value,
                value:''
            });
        } else {
            this.setState({
                result:'땡',
                value:'',
            });
            this.input.focus();
        }
    };

    input;

    onChangeInput = (e) => {
        this.setState({value:e.target.value});
    }

    onRefInput = (c) => {
        this.input = c
    }

    render() {
        return (
            <>
                <div>
                    <div>{this.state.word}</div>
                    <form onSubmit={this.onSubmitForm}>
                        <input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
                        <button> 입력!!</button>
                    </form>
                </div>
                <div>{this.state.result}</div>
            </>
        );
    }
}

module.exports = WordRelay;

C:\ react_game_prac2 \ webpack.config.js

    output: {
        path:path.join(__dirname,'dist'),
        filename:'app.js',
        publicPath:'/dist/'
    },  // 출력

git: https://github.com/hyunsokstar/react_game_prac2

1 个答案:

答案 0 :(得分:1)

在文档中说public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.CardViewHolder> { ArrayList<NoticeItem> noticeItems; Context ctx; // ArrayList to store positions of clicked items ArrayList<Integer> clickedItems = new ArrayList<>(); public RecyclerViewAdapter(ArrayList<NoticeItem> noticeItems,Context ctx) { this.noticeItems = noticeItems; this.ctx = ctx; } @NonNull @Override public CardViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { View view = LayoutInflater.from(ctx).inflate(R.layout.notice_item,viewGroup,false); return new CardViewHolder(view); } @Override public void onBindViewHolder(@NonNull CardViewHolder cardViewHolder, int position) { cardViewHolder.title.setText(noticeItems.get(position).getTitle()); cardViewHolder.pubDate.setText(noticeItems.get(position).getDate()); // checking if array list contains the current position if(clickedItems.contains(position)) { cardViewHolder.cardView.setCardBackgroundColor(Color.GRAY); Log.i("Text",cardViewHolder.title.getText().toString()); } } @Override public int getItemCount() { return noticeItems.size(); } public class CardViewHolder extends RecyclerView.ViewHolder { TextView title,pubDate; CardView cardView; public CardViewHolder(@NonNull View itemView) { super(itemView); itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(ctx,WebViewActivity.class); intent.putExtra("url",noticeItems.get(getAdapterPosition()).link); ctx.startActivity(intent); // adding clicked item position to the array list clickedItems.add(getAdapterPosition()); } }); title = itemView.findViewById(R.id.title); pubDate = itemView.findViewById(R.id.date); cardView = itemView.findViewById(R.id.cardView); } } } 前必须先输入react-hot-loader