一、利用 creat-react-app 新建一个react单页面应用。

cnpm i -g create-react-app

create-react-app demo

cd demo

npm start

可以看到下面页面

三、修改index.js内容为：

import React from 'react';

import ReactDOM from 'react-dom';

import './index.scss';

class Login extends React.Component{

    constructor() {

        super();

        this.state = {

        }

    }

    componentDidMount(){

    }

    render() {

        return (

            <div className="login">

                22

              </div>

        )

    }

}

ReactDOM.render(

    <Login/>,

    document.getElementById('app')

);

四、删除src下面的registerServiceWorker.js（该文件用于构建pwa应用用的，暂时我们用不了）和 logo.svg文件（不想处理图片文件）和 App.test.js(用于测试用的)。

现在src/下面有四个文件。接下来，在src下面新建自己需要的文件夹，分别将原来的四个文件拷贝进文件夹内。文件目录如下：

五、修改public/index.html内容为：

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="theme-color" content="#000000">

    <title>React App</title>

  </head>

  <body>

    <noscript>

      You need to enable JavaScript to run this app.

    </noscript>

    <div id="root"></div>

  </body>

</html>

六、开始install webpack和配置webpack

1.安装依赖。将package.json文件用下面的文件替代

{

  "name": "demo",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "react": "^15.6.1",

    "react-dom": "^15.6.1"

  },

  "devDependencies": {

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "clean-webpack-plugin": "^0.1.16",

    "css-loader": "^0.28.7",

    "extract-text-webpack-plugin": "^3.0.0",

    "file-loader": "^1.0.0",

    "glob": "^7.1.2",

    "html-webpack-plugin": "^2.30.1",

    "postcss-loader": "^2.0.6",

    "style-loader": "^0.18.2",

    "url-loader": "^0.5.9",

    "webpack": "^3.5.6",

    "webpack-dev-server": "^2.8.1"

  },

  "scripts": {

    "start": "webpack-dev-server --open",

    "build": "webpack"

  }

}

2.删除当前目录中的node_modules，然后重新在控制台执行

npm i

3.在根目录下也就是／demo下新建一个webpack.config.js文件,写入如下代码

const webpack = require('webpack');

const glob = require('glob');

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

let cssExtract = new ExtractTextPlugin('assets/css/reset.css');

let sassExtract = new ExtractTextPlugin('assets/css/[name].[chunkhash:6].css');

const env=process.argv[2];

let dnsPath='';

if(env==='pro'){

    dnsPath=''

}else if(env==='stg'){

    dnsPath=''

}else{//本地

    dnsPath='/finance/scan-to-pay'

}

const webpackConfig = {

  entry: {},

  output:{

    path:path.resolve(__dirname, 'dist'),

    filename:'assets/js/[name].[chunkhash:6].js',

    publicPath: '/'

  },

  devServer: {

    host: "172.16.10.70",

    inline: true,

    port: 8181,

    // proxy: {

    //   '/financegateway': {

    //     target: '',

    //     changeOrigin: true

    //   }

    // }

    proxy: [{

      context: ['/financegateway', '/uploadimage', '/pointgate'],

      target: '',

      changeOrigin: true

    }]

  },

  module:{

    rules:[

      {

        test:/\.js?$/,

        exclude:/node_modules/,

        loader:'babel-loader',

        query:{

          presets:['@babel/preset-env','@babel/preset-react']

        }

      },

      {

        test: /\.css$/,

        use: cssExtract.extract({

          use: ['css-loader', 'postcss-loader']

        })

      },

      {

        test: /\.scss$/,

        loader: sassExtract.extract({

          use: ['css-loader', 'postcss-loader', 'sass-loader']

        })

      },

      // {

      //   test: /\.(png|jpg|jpeg|gif)$/,

      //   use: [

      //     {

      //       loader: 'url-loader?limit=8192&name=assets/imgs/[name][hash:6].[ext]'

      //     }

      //   ]

      // }

      {

        test: /\.(png|jpg|jpeg|gif|svg)$/,

        use: [

          {

            loader: 'file-loader',

            options: {

              name() {

                return 'assets/imgs/[hash:6].[ext]'

              },

              publicPath: '/'

            }

          }

        ]

      }

    ]

  },

  plugins: [

    cssExtract,

    sassExtract,

    new CleanWebpackPlugin(

      ['dist'],　

      {

        root: __dirname,    　　　　　　　　　　

        verbose: true,    　　　　　　　　　　

        dry:   false    　　　　　　　　　　

      }

    )

  ],

};

// 获取指定路径下的入口文件

function getEntries(globPath) {

  const files = glob.sync(globPath),

   entries = {};

  files.forEach((filepath)=> {

    const path = filepath.replace(/\/index.js/, ''); // 获取文件路径

    let name = path.replace(/src\//, ''); // 文件路径去除src目录

    entries[name] = './' + filepath;

  });

  return entries;

}

const entries = getEntries('src/**/index.js');

// 循环入口文件

Object.keys(entries).forEach((name)=> {

    webpackConfig.entry[name] = entries[name];

    const plugin = new HtmlWebpackPlugin({

      filename: `${name}/index.html`,

      template: `src/${name}/index.html`,

      inject: true,

      chunks: [name]

    });

    webpackConfig.plugins.push(plugin);

})

module.exports = webpackConfig;

4.postcss.config.js

module.exports = {

    plugins: [require('autoprefixer')({

        overrideBrowserslist: ["last 5 versions"] // 所有浏览器兼容到最后5个版本

    })]

}

开始install webpack和配置webpack

react + webpack 多页面搭建的更多相关文章

  1. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  2. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  3. React+webpack开发环境的搭建

    首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述. 在上一章说过babel是一个javascript编辑器,在react项目中使用bab ...

  4. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  5. React + webpack 快速搭建开发环境

    因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...

  6. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

  7. 用React & Webpack构建前端新闻网页

    这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希 ...

  8. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  9. 部署React+webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

随机推荐

  1. JS 里的数据类型转换

    JS的数据类型转换 一.js中的数据类型Js中的数据类型一共有六种,即number,string,boolean,underfine,null,object. 1.Number Number数据类型指 ...

  2. SQL执行计划Cost与性能之间的的关系

    关于执行计划Cost的三个疑问: 1. 执行计划的Cost越低,SQL就一定跑得越快吗?或者说Cost 和 执行时间成比例关系吗? 2. Oracle 默认产生的执行计划是Cost最低的吗? 3. 如 ...

  3. Mysql数据库日志类型查询与配置详解

    在mysql中日志分为很多种,下面小编来给大家介绍Mysql数据库日志类型查询与使用,希望对各位同学会有所帮助 mysql常见的日志类型有五种:错误日志.二进制日志.查询日志.慢查日志和中继日志. 一 ...

  4. 【Leetcode链表】奇偶链表（328）

    题目 给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1 ...

  5. 【JZOJ4832】【NOIP2016提高A组集训第3场10.31】高维宇宙

    题目描述 数据范围 解法 由于大于4的素数只有可能由奇数和偶数的和得出. 所以根据数的奇偶性可以分出两类数奇数和偶数. 奇数之间不会相互匹配,偶数之间也不会相互匹配. 那么原问题转化为二分图最大匹配. ...

  6. hdu 1728 逃离迷宫 BFS加优先队列 DFS()

    http://acm.hdu.edu.cn/showproblem.php?pid=1728 题意就是能否在规定的转弯次数内从起点走到终点.刚走时那步方向不算. 只会bfs(),但想到这题需要记录转弯 ...

  7. C# —— 枚举

    一.使用枚举的优点 枚举能够使代码更加的清晰,它允许使用描述性的名称表示整数值. 枚举使代码更易于维护,有助于确保给变量指定合法的.期望的值. 枚举使代码更易输入. 二.枚举说明 1.简单枚举 枚举使 ...

  8. 前端基础☞html

    HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s ...

  9. mysql原来是按自然日统计。怎么可以用今天10点到次日10点这样统计？？？

    关于网友提出的" mysql原来是按自然日统计.怎么可以用今天10点到次日10点这样统计???"问题疑问,本网通过在网上对" mysql原来是按自然日统计.怎么可以用今天 ...

  10. 字节缓冲流 ( BufferedInputStream / BufferedOutputStream)

    package com.sxt.reader; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; imp ...