webpack+react搭建环境

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack+react搭建环境相关的知识,希望对你有一定的参考价值。

近日自己项目遇到需要用webpack搭建react环境,查了挺多 ,自己总结一下

1.下载安装最新版node.js(https://nodejs.org/en/

2.主要看自己网络情况,可以选择安装淘宝镜像去搭建环境

npm config set registry http://registry.npm.taobao.org/

3.通过npm/cnpm全局安装webpack, Babel, Webpack-dev-server:

npm install babel webpack webpack-dev-server -g

4.选择项目存放目录,用npm init 初始化 npm 项目

5.在项目中安装 react, react-dom

npm install react react-dom --save

6.在项目中安装 Babel 转换器,这里用到插件 babel-preset-react, babel-preset-latest,latest 即最新的 ES 规范,包括了 Async/Await 这些新特性。

npm install babel-loader babel-core babel-preset-react babel-preset-latest --save

7.创建项目文件,main.js 即项目入口文件,App.js 即 React 组件主文件

文件目录最终为:

技术分享

8.配置webpack,编辑webpack.config.js

技术分享
module.exports = {
    entry: ‘./main.js‘, // 入口文件路径
    output: {
        path: ‘/‘,
        filename: ‘index.js‘
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\\.js$/, // babel 转换为兼容性的 js
                exclude: /node_modules/,
                loader: ‘babel-loader‘,
                query: {
                    presets: [‘react‘, ‘latest‘]
                }
            }
        ]
    }
}
技术分享

9.写index.html

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
技术分享

写App.js:

技术分享
import React from ‘react‘;

class App extends React.Component {

    render() {
        return <div>Hello World!</div>
    }
}

export default App
技术分享

写Main.js:

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import App from ‘./App‘;

ReactDOM.render(<App />, document.getElementById(‘app‘));

10.配置 npm scripts, 编辑 package.json,在"scripts"属性处添加一行:

"scripts": {
   "start": "webpack-dev-server"
},

11.基本的框架搭建完毕,npm start 然后打开 http://localhost:3333 试试:

npm start

以上是关于webpack+react搭建环境的主要内容,如果未能解决你的问题,请参考以下文章

webpack系列从零搭建 webpack4+react 脚手架

基于webpack的React项目搭建

webpack5项目搭建React-Cli(配置合并)

webpack+react搭建环境

webpack4从零配置搭建简单的React16开发环境

从零开始搭建webpack+react开发环境