react + webpack 多页面搭建
一、利用 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 多页面搭建的更多相关文章
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
- React+webpack开发环境的搭建
首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述. 在上一章说过babel是一个javascript编辑器,在react项目中使用bab ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- React + webpack 快速搭建开发环境
因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...
- webpack 多页面支持 & 公共组件单独打包
webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...
- 用React & Webpack构建前端新闻网页
这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希 ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- 部署React+webpack工程的步骤
# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...
随机推荐
- 大数据技术之Zookeeper
第1章 Zookeeper入门 1.1 概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. 1.2 特点 1.3 数据结构 1.4 应用场景 提供的服务包括:统 ...
- cocos2dX 之CCAnimation/CCAnimate
我们今天来学习cocos2dX里面的动画的制作, 有人说, 不是前面CCAction已经学过了吗? 怎么还要学, CCAction是动作, 而我们今天要学的是动画哦, 是让一个东西动起来哦, 好了进入 ...
- Hdu 4810
2014-05-02 15:53:50 题目连接 2013年南京现场赛的题目,现场的时候,排在我们前面的队伍基本都过了这题,我们后面的队伍也有不少过了这题,唯独我们没有.. 后来是Qingyu Sha ...
- PyCharm切换Python版本
由于代码格式问题,很多情况下需要我们去切换Python版本,那么在当下火爆的PyCharm中是如何切换Python版本的呢? 打开File菜单,选择Settings: 打开Settings窗口后,选择 ...
- python 并发之进程
一.什么是进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实 ...
- shell学习（19）- find查找命令
Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录 ...
- 【NS2】NS2机制浅显分析一下（转载）
[我在之前看的是以ping协议为实例来理解TclCL机制和分裂对象模型] 本文以channel实例的创建过程为例,试图说明ns2的分裂机制,请在阅读本文前阅读<The NS Manual> ...
- 测试安装phpmyadmin4.0
在测试环境准备测试安装phpmyadmin,测试环境上为一台zabbix 3.4的服务器,已经安装lamp环境. 根据安装文档,从phpmyadmin官网上下载了4.0版本,复制到/var/www/h ...
- Java练习 SDUT-1704_统计数字问题
统计数字问题 Time Limit: 1000 ms Memory Limit: 32768 KiB Problem Description 一本书的页码从自然数1 开始顺序编码直到自然数n.书的页码 ...
- @loj - 2483@「CEOI2017」Building Bridges
目录 @desription@ @solution@ @accepted code@ @details@ @another solution@ @another code@ @desription@ ...