webpack打包react和过程遇到的问题

最新推荐文章于 2024-03-29 08:57:33 发布

Dong.YI

最新推荐文章于 2024-03-29 08:57:33 发布

阅读量2.6k

点赞数

分类专栏：知识分享文章标签： webpack react

本文链接：https://blog.csdn.net/YIDBoy/article/details/54574342

版权

知识分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.首先我们需要在项目下载中间件：babel-preset-es2015，babel-preset-react，react，react-router，webpack-dev-server

npm install babel-preset-es2015 babel-preset-react react
react-router react-router --save-dev

webpack-dev-server以全局安装：

nam install webpack-dev-server -g

2.index.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
    <script src="js/bundle.js"></script>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>

3.main.js:

const React = require('react'); 
const ReactDOM = require('react-dom');
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('wrapper')
);

4.webpack.config.js:

module.exports={
    entry:{
        bundle:'./main.js',
    },
    output:{
        path:__dirname+"/js",
        filename:'[name].js'
    },
    module:{
        loaders:[
            {
                test: /\.js[x]?$/,
                exclude:/node_modules/,
                loader:'babel-loader?presets[]=es2015&presets[]=react',
            },
        ]   
    }
}

这是我们运行webpack-dev-server，然后在浏览器打开网址：http://localhost:8080/，控制台会出现如图结果：
这里写图片描述

解决方案：

将我们的bundle.js放在文档的底部，再运行就可以解决了，

（放在底部，它不会阻止渲染脚本加载之前如果你添加反应服务器呈现到您的项目。）

其他方案：

有人说不想把bundle.js放在底部，在网上查找答案，有的朋友说直接访问http://localhost:8080/webpack-dev-server/index.html，但是我这边试了还是不行，有对应解决方案的希望可以分享下。

Dong.YI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack打包react和过程遇到的问题

1.首先我们需要在项目下载中间件：babel-preset-es2015，babel-preset-react，react，react-router，webpack-dev-servernpm install babel-preset-es2015 babel-preset-react reactreact-router react-router --save-devwebpack-dev-ser
复制链接

扫一扫

专栏目录