webpack构建react多页面应用详解


Posted in Javascript onSeptember 15, 2017

写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架。

利用creat-react-app 新建一个react应用

npm install -g create-react-app

然后创建一个项目

create-react-app demo

create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装。

然后我们进入项目并启动。

cd demo

然后启动项目

npm start

那就会看到如下页面

webpack构建react多页面应用详解

然后进入src/App.js,用下面代码替换App.js中的代码(因为在webpack中暂时不想处理图片和icon)

import React, { Component } from 'react';
import './App.css';

class App extends Component {
 render() {
  return (
   <div className="App">
    <div className="App-header">
     <h2>Welcome to App</h2>
    </div>
    <p className="App-intro">
     To get started, edit <code>src/App.js</code> and save to reload.
    </p>
   </div>
  );
 }
}

export default App

然后将 index.js 中的 内容替换为如下代码(删除registerServiceWorker)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

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

现在src/下面有四个文件。接下来,在src下面新建两个文件夹 app1和 app2,分别将原来的四个文件拷贝进入app1和app2。文件目录如下:

webpack构建react多页面应用详解

接下来,进入public文件下,删除favicon.ico(不想处理)和 manifest.json(构建pwa用的),然后将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>

这个index.html就是我们的模版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');

const webpackConfig = {
  entry: {},
  output:{
    path:path.resolve(__dirname, './dist/'),
    filename:'[name].[chunkhash:6].js'
  },
  //设置开发者工具的端口号,不设置则默认为8080端口
  devServer: {
    inline: true,
    port: 8181
  },
  module:{
    rules:[
      {
        test:/\.js?$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        query:{
          presets:['es2015','react']
        }
      },
      {
        test: /\.(scss|sass|css)$/, 
        loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
      },
      
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].[chunkhash:6].css"),
    new CleanWebpackPlugin(
      ['dist'],  
      {
        root: __dirname,    




        verbose: true,    





        dry:   false    





      }
    )
  ],
};

// 获取指定路径下的入口文件
function getEntries(globPath) {
  const files = glob.sync(globPath),
   entries = {};
  files.forEach(function(filepath) {
    const split = filepath.split('/');
    const name = split[split.length - 2];
    entries[name] = './' + filepath;
  });
  return entries;
}
    
const entries = getEntries('src/**/index.js');

Object.keys(entries).forEach(function(name) {
  webpackConfig.entry[name] = entries[name];
  const plugin = new HtmlWebpackPlugin({
    filename: name + '.html',
    template: './public/index.html',
    inject: true,
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
})

module.exports = webpackConfig;

4.然后用直接执行如下代码

npm run build

成功在dist中看到你的两个页面app1和app2.

如果要自己调试用直接启用npm run start,然后在localhost:8181/app1.html查看页面进行调试。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
js动态为代码着色显示行号
May 29 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue3中的组件间通信
Mar 31 Vue.js
详解Vue中一种简易路由传参办法
Sep 15 #Javascript
JavaScript实现换肤功能
Sep 15 #Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
详解Vue.js Mixins 混入使用
Sep 15 #Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 #Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 #Javascript
vue实现登陆登出的实现示例
Sep 15 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php生成圆角图片的方法
2015/04/07 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python3连接MySQL数据库实例详解
2018/05/24 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python调用接口的4种方式代码实例
2019/11/19 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
优秀大学生自荐信
2014/06/09 职场文书
怎样写离婚协议书
2014/09/10 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
党员心得体会范文2016
2016/01/23 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python安装使用Scrapy框架
2022/04/12 Python