Home > Article > Web Front-end > webpack builds react multi-page

webpack builds react multi-page

巴扎黑Original: 2018-05-18 14:47:292547browse

This article mainly introduces the detailed explanation of building react multi-page applications with webpack. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

The original intention of writing this is that it is difficult to find a concise project scaffolding. Many scaffoldings have many dependencies, and it will take a long time just to look at the dependencies, so I refer to the content on the Internet and make it. Such a simple multi-page scaffolding.

Use creat-react-app to create a new react application

npm install -g create-react-app

Then create a project

create-react-app demo

create-react-app will automatically initialize a scaffolding And install various necessary dependencies of the React project. If there are network problems during the process, please use the cnpm Taobao mirror to install.

Then we enter the project and start it.

cd demo

Then start the project

npm start

You will see the following page

Then enter src/App.js, Replace the code in App.js with the following code (because you don’t want to process images and icons in webpack for the time being)

import React, { Component } from &#39;react&#39;;
import &#39;./App.css&#39;;

class App extends Component {
 render() {
  return (
   <p className="App">
    <p className="App-header">
     <h2>Welcome to App</h2>
    </p>
    <p className="App-intro">
     To get started, edit <code>src/App.js</code> and save to reload.
    </p>
   </p>
  );
 }
}

export default App

Then replace the content in index.js with the following code (delete registerServiceWorker)

import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
import &#39;./index.css&#39;;
import App from &#39;./App&#39;;


ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));

Then delete registerServiceWorker.js under src (this file is used to build pwa applications, we can’t use it for the time being) and logo.svg files (you don’t want to process image files) and App.test.js (for testing) .

There are four files under src/ now. Next, create two new folders app1 and app2 under src, and copy the original four files into app1 and app2 respectively. The file directory is as follows:

Next, go to the public file, delete favicon.ico (don’t want to deal with it) and manifest.json (used to build pwa), and then Replace the content in index.html with the following content

<!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>
  <p id="root"></p>
 </body>
</html>

This index.html is our template html.

Get to the point and start installing webpack and configuring webpack

1. Install dependencies. Replace the package.json file with the following file

{
 "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. Delete node_modules in the current directory, and then execute it on the console again

npm i

3. In the root directory, which is /demo Create a new webpack.config.js file and write the following code

const webpack = require(&#39;webpack&#39;);
const glob = require(&#39;glob&#39;);
const path = require(&#39;path&#39;);
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
const CleanWebpackPlugin = require(&#39;clean-webpack-plugin&#39;);

const webpackConfig = {
  entry: {},
  output:{
    path:path.resolve(__dirname, &#39;./dist/&#39;),
    filename:&#39;[name].[chunkhash:6].js&#39;
  },
  //设置开发者工具的端口号,不设置则默认为8080端口
  devServer: {
    inline: true,
    port: 8181
  },
  module:{
    rules:[
      {
        test:/\.js?$/,
        exclude:/node_modules/,
        loader:&#39;babel-loader&#39;,
        query:{
          presets:[&#39;es2015&#39;,&#39;react&#39;]
        }
      },
      {
        test: /\.(scss|sass|css)$/, 
        loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
      },
      
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].[chunkhash:6].css"),
    new CleanWebpackPlugin(
      [&#39;dist&#39;],　 
      {
        root: __dirname,    　　　　　　　　　　
        verbose: true,    　　　　　　　　　　
        dry:   false    　　　　　　　　　　
      }
    )
  ],
};

// 获取指定路径下的入口文件
function getEntries(globPath) {
  const files = glob.sync(globPath),
   entries = {};
  files.forEach(function(filepath) {
    const split = filepath.split(&#39;/&#39;);
    const name = split[split.length - 2];
    entries[name] = &#39;./&#39; + filepath;
  });
  return entries;
}
    
const entries = getEntries(&#39;src/**/index.js&#39;);

Object.keys(entries).forEach(function(name) {
  webpackConfig.entry[name] = entries[name];
  const plugin = new HtmlWebpackPlugin({
    filename: name + &#39;.html&#39;,
    template: &#39;./public/index.html&#39;,
    inject: true,
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
})

module.exports = webpackConfig;

4. Then directly execute the following code

npm run build

to successfully see your two pages app1 and app2 in dist.

If you want to debug by yourself, just enable npm run start, and then view the page for debugging at localhost:8181/app1.html.

The above is the detailed content of webpack builds react multi-page. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to prevent library functions from being accidentally modified incorrectlyNext article：How to prevent library functions from being accidentally modified incorrectly

See more

webpack builds react multi-page

Related articles