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创建命名空间(namespace)的最简实现
Dec 11 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 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
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python+pandas分析nginx日志的实例
2018/04/28 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
django admin 添加自定义链接方式
2020/03/11 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
商务考察邀请函范文
2014/01/21 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android