webpack笔记

Posted 2021-09-15 码码码畜

webpack-dev-server的热更新

将webpack-dev-server的hot设置为true，webpack会自动引入webpack.HotModuleReplacementPlugin插件，所以，我们并不需要如下操作

{
    plugins: [new webpack.HotModuleReplacementPlugin()]
}

在new webpack.HotModuleReplacementPlugin()被载入后，它的接口会暴露在module.hot下，其中最有用的就是accept方法

function render(Component) {
    ReactDOM.render(<Component / >, document.getElementById(\'root\'))
}

if (module.hot) {
  module.hot.accept(\'./App\', () => {
    const nextApp = require(\'./App\').default
    
    // 重新渲染App组件
    render(nextApp)
  });
}

// 初始化调用
render(App)

file-loader、url-loader各做了什么事情？

待实现

style-loader和css-loader各做了什么事情？

待实现