使用 webpack 和 react × 变成 × 缩小

Question

我正在使用 webpack.optimize.UglifyJsPlugin() 来缩小我的 React 代码。

这是我的渲染函数

return (
    <div id='columnPicker' className='modal fade' tabIndex='-1' role='dialog'>
        <div className='modal-dialog modal-sm' role='document'>
            <div className='modal-content'>
                <div className='modal-header'>
                    <button type='button' className='close' data-dismiss='modal'>&times;</button>
                    <h4 className='modal-title'>Column Picker</h4>
                </div>
                <div className='modal-body'>
                    <ul className='list-group'>
                        {listItems}
                    </ul>
                </div>
                <div className='modal-footer'>
                    <div className='pull-right'>
                        <button type='button' className='btn btn-sm btn-primary' data-dismiss='modal' onClick={props.onSave}>Save</button>
                    </div>
                    <div className='pull-right'>
                        <button type='button' className='btn btn-link' data-dismiss='modal'>Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
);

关闭按钮使用 × 但当它实际呈现时我看到

<button type="button" class="close" data-dismiss="modal">Ã—</button>

如果我删除 webpack.optimize.UglifyJsPlugin() 它会按预期呈现。有谁知道如何解决这个问题？

Answer 1

在 HTML 中指定字符集将保留正确的字符。

尝试将 <meta charset="UTF-8"/>（或任何字符集）添加到 html 文件的元标记中。

Answer 2

我刚刚在使用 angular-cli (V2.4.6) 时遇到了同样的问题。在这种情况下，问题只发生在生产模式下。

Angular-cli 在内部使用 webpack 但无法访问生产模式与开发模式中使用的选项。

正在添加 <meta charset="UTF-8"/> 也为我工作。

使用 webpack 和 react × 变成 × 缩小

Using webpack and react × becomes Ã— with minification

reactjs

webpack

react-jsx

使用 webpack 和 react × 变成 × 缩小

Using webpack and react &times; becomes Ã— with minification

reactjs

webpack

react-jsx

Using webpack and react × becomes Ã— with minification