React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)

前端人人

已于 2022-03-20 18:43:22 修改

阅读量2.3k

点赞数

分类专栏：前端文章标签： react webpack 前端开发

于 2017-12-28 14:46:30 首次发布

本文链接：https://blog.csdn.net/oKeYue/article/details/78922031

版权

前端专栏收录该内容

66 篇文章 3 订阅

订阅专栏

本教程总共7篇,每日更新一篇,请关注我们,敬请期待!

1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28

2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29

3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30

4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31

5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01

6.React多页面应用6(webpack自动化发布到多个环境,测试环境、预生产环境等)----2018.01.02

7.React多页面应用7(引入eslint代码检查)----2018.01.03

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

新建项目 react1
初始化工程

npm init -y
安装相关依赖

npm i -S react react-dom

-S 意思是保存到 package.json dependencies 字段

npm i -D webpack webpack-dev-server webpack-merge babel-cli babel-preset-env babel-preset-react babel-preset-react-hmre babel-loader

-D 意思是保存到 package.json devDependencies字段
建立工程目录

react

--app    主目录

--component    react组件目录

--index    首页目录

--public    公共目录主要放 js css img

--js    公共js文件

--build    webpack 打包输出目录

--config    打包配置目录

--webpack webpack配置目录

--entryBuild webpack 打包入口文件目录

5. 新建页面

首页: Index.jsx

存放在 app->component->index 目录下

import React from 'react';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { seconds: 0 };
    }

    tick() {
        this.setState(prevState => ({
            seconds: prevState.seconds + 1
        }));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return (
            <div>
           这是首页
                Seconds: {this.state.seconds}
            </div>
        );
    }
}

export default Index;

建立 index.html

存放再根目录下-> build 下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/index.js></script>
</body>
</html>

商城页: Index.jsx

存放在 app->component->shop目录下

import React from 'react';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {seconds: 0};
    }

    tick() {
        this.setState(prevState => ({
            seconds: prevState.seconds + 1
        }));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return (
            <div>
           这是商城
                Seconds: {this.state.seconds}
            </div>
        );
    }
}

export default Index;

建立 shop.html

存放再根目录下-> build 下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/shop.js></script>
</body>
</html>

我们会在后面课程中讲解如何自动化生成 html 页面,就不用手动了!

注:如果组件在编译器中文件报错请设置webstrom

6.建立webpack 入口文件

entryBuild -> index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/index/Index.jsx';
ReactDOM.render(<Index/>,document.getElementById('app'));

7.配置webpack

基础配置:

config -> webpack -> webpack.base.conf.js

let config = {
    entry: {
        'index':'./entryBuild/index.js'
    },
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css",".pcss"],
    }
};
module.exports = config;

文件路径配置

config -> webpack -> webpack.file.conf.js

module.exports = {
    devDirectory:'build',/*开发目录*/
    proDirectory:'pc',/*发布目录*/
    resource:'resource',/*静态资源*/
};

开发配置:

config -> webpack -> webpack.dev.conf.js

const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置

let config = merge(baseWebpackConfig, {
    output: {
        path: path.resolve(webpackFile.devDirectory),
        filename: 'js/[name].js',
        chunkFilename: "js/[name]-[id].js",
        publicPath: ''
    },
    plugins: [
        /*设置开发环境*/
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development'),
            }
        }),
        /*设置热更新*/
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: [
                    'babel-loader',
                ],
                include: [
                    path.resolve(__dirname, "../../app"),
                    path.resolve(__dirname, "../../entryBuild")
                ],
                exclude: [
                    path.resolve(__dirname, "../../node_modules")
                ],
            }
        ]
    },
    /*设置api转发*/
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        hot: true,
        inline: true,
        contentBase: path.resolve(webpackFile.devDirectory),
        historyApiFallback: true,
        disableHostCheck: true,
        proxy: [
            {
                context: ['/api/**', '/u/**'],
           target: 'http://192.168.12.100:8080/',
           secure: false
         }
        ],
        /*打开浏览器 并打开本项目网址*/
        after() {
            opn('http://localhost:' + this.port);
        }
    }
});
module.exports = config;

8.配置babel

根目录下 .babelrc

{
  "presets":["react","env"],
  "env":{
    "development": {
      "presets":["react-hmre"]
    }
  }
}

注:react-hmre 是 babel-preset-react-hmre 用于开启热替换

10.配置npm命令

再跟目录下 package.json 里配置 scripts 字段

"dev": "webpack-dev-server --devtool eval --progress --colors --profile --config config/webpack/webpack.dev.conf.js",

11.执行 npm run dev

会自动打开浏览器 http://localhost:8080/

随便修改下保存,右侧浏览器会自动热更新

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

欢迎童鞋们留言!

来源 React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)-留客客-获客营销saas系统

前端人人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)

本教程总共7篇,每日更新一篇,请关注我们,敬请期待!1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.282.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.293.React多页面应用3(webpack性能提升,包括打包性能、
复制链接

扫一扫