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 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JS canvas实现画板和签字板功能
Feb 23 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 获取本机外网/公网IP的代码
2010/05/09 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
python生成指定长度的随机数密码
2014/01/23 Python
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
记录Django开发心得
2014/07/16 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
python打包多类型文件的操作方法
2020/09/21 Python
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
中科软笔试题和面试题
2014/10/07 面试题
研究生毕业鉴定
2014/01/29 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电