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数独游戏解析(一)-页面布局
Nov 05 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
express 项目分层实践详解
Dec 10 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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
Symfony生成二维码的方法
2016/02/04 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PDO::getAttribute讲解
2019/01/28 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
爬山算法简介和Python实现实例
2014/04/26 Python
9种python web 程序的部署方式小结
2014/06/30 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
员工薪酬激励方案
2014/06/13 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书