React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04

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

3、React多页面应用3(webpack4 多页面实现)---2018.04.09

4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10

5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11

6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12

7、React多页面应用7(webpack4 生产环境配置)---2018.04.13

8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16

9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17

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

最近webpack3升级了到webpack4,好多童鞋按照第一篇教程做,会出问题,主要是我当时没有考虑按版本号安装导致的,今天我们用webpack4配置个工程!这次我们安装依赖的时候,带上版本号,以后大家不管什么时候,看到这篇教程,照着做,应该不会出大问题,如有问题在下面留言,或者公众号内联系我们!

好了,废话不多说,我们开始撸码!

1、新建工程 react2

2、初始化工程

npm init -y

3、建立工程目录

--app 主目录

--component react组件目录

--index 首页目录

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

--js 公共js文件

--css css目录

--img 图片目录

--devBuild webpack 开发环境下 打包输出目录

--config 打包配置目录

--webpack webpack配置目录

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

目录没有展开状态

目录展开状态

4、安装react

npm i -S react@16.3.0 react-dom@16.3.0

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

5、安装 webpack babel 相关依赖

npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4

-D 意思是保存 到 package.json devDependencies字段

注意复制的时候要是一行的,不能换行!

6、新建Index.jsx文件

首页: Index.jsx

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

完整代码

import React from 'react';

class Index extends React.Component {
    render() {
        return (
            <div>
                这是首页
            </div>
        );
    }
}

export default Index;

7、建立 index.html

存放再 根目录下-> devBuild 下

完整代码

<!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>

8、建立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'));

9、配置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:'devBuild',/*开发目录*/
    proDirectory:'dist',/*发布目录*/
    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, {
    /*设置开发环境*/
    mode: 'development',
    output: {
        path: path.resolve(webpackFile.devDirectory),
        filename: 'js/[name].js',
        chunkFilename: "js/[name].js",
        publicPath: ''
    },
    plugins: [
        /*设置热更新*/
        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;

红框部分就是webpack4 与webpack3 变化支出

以下是webpack3截图,打红叉的是webpack4 变化的部分,我们会在下面教程讲解如何提取公共包!

10、配置babel

根目录下 .babelrc

完整代码

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

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

11、配置npm执行命令

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

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

12、执行 npm run dev

执行完截图

浏览器截图

我们来修改一下看看能不能 热替换

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-04-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴伟祥

Fiddler是位于客户端和服务器端的HTTP代理(目前最常用的http抓包工具之一)

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下:

17440
来自专栏Youngxj

emlog转WordPress神器

22440
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

19150
来自专栏Python数据科学

想爬虫?登录了再说

摘要: 在进行爬虫时,除了常见的不用登录就能爬取的网站,还有一类需要先登录的网站。比如豆瓣、知乎,以及上一篇文章中的桔子网。这一类网站又可以分为:只需输入帐号密...

17240
来自专栏守望轩

Visual Studio 2008 每日提示(三十四)

#341、导出模板不选择“在资源管理器显示” 原文链接:What unchecking the display an explorer window on t...

30440
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

24290
来自专栏Spring相关

Vue-router的基本使用

13820
来自专栏北京马哥教育

两个成倍提高工作效率的 Vim 使用技巧

18560
来自专栏vue学习

小程序 — 保存图片到手机相册②(用户授权等)

(1)如果用户第一次点击的时候,对弹出来的微信授权弹窗点击了拒绝,那么之后点击保存图片就没用了:

1K30
来自专栏h5

支付宝小程序wcPop弹窗自定义插件dialog模板

最近由于项目需要,自己开发的支付宝小程序自定义弹窗插件wcPop,就抽空整理了一份demo,多种api调用,插件语法简洁优雅,可随意修改各种弹窗效果。

36910

扫码关注云+社区

领取腾讯云代金券