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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
详解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
php 冒泡排序 交换排序法
2011/05/10 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python脚本处理空格的方法
2016/08/08 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python装饰器常见使用方法分析
2019/06/26 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python @property使用方法解析
2019/09/17 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
最新大学生自我评价
2013/09/24 职场文书
护士自荐信怎么写
2013/10/18 职场文书
创建文明城市倡议书
2015/04/28 职场文书
民事答辩状格式范文
2015/05/21 职场文书