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 布尔型分析
Dec 22 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
Vue3不支持Filters过滤器的问题
Sep 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
php两种无限分类方法实例
2015/04/21 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
Prototype ObjectRange对象学习
2009/07/19 Javascript
jQuery select控制插件
2009/08/17 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
详解babel升级到7.X采坑总结
2019/05/12 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python写入中英文字符串到文件的方法
2015/05/06 Python
python处理二进制数据的方法
2015/06/03 Python
python paramiko模块学习分享
2017/08/23 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python3获取url文件大小示例代码
2019/09/18 Python
Django继承自带user表并重写的例子
2019/11/18 Python
浅谈Python 参数与变量
2020/06/20 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
周年庆典邀请函范文
2014/01/24 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
HTML基础详解(上)
2021/10/16 HTML / CSS