Les builds Webpack réagissent sur plusieurs pages-js tutoriel-php.cn

Les builds Webpack réagissent sur plusieurs pages

巴扎黑

Libérer： 2018-05-18 14:47:29

original

2560 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de la création d'applications multipages React avec webpack. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

L'intention initiale de l'écriture de ceci est qu'il est difficile de trouver un échafaudage de projet concis. De nombreux échafaudages ont de nombreuses dépendances, et cela prendra beaucoup de temps rien que pour le regarder. les dépendances, je me réfère donc au contenu sur Internet et en fais un échafaudage multipage si simple.

Utilisez creat-react-app pour créer une nouvelle application React

npm install -g create-react-app

Copier après la connexion

Créez ensuite un projet

create-react-app demo

Copier après la connexion

create-react- L'application initialisera automatiquement un échafaudage et installera diverses dépendances nécessaires pour le projet React. S'il y a des problèmes de réseau pendant le processus, veuillez utiliser l'image cnpm Taobao pour l'installer.

Ensuite, nous entrons dans le projet et le démarrons.

cd demo

Copier après la connexion

Ensuite démarrez le projet

npm start

Copier après la connexion

Ensuite vous verrez la page suivante

Puis entrez src / App.js, remplacez le code dans App.js par le code suivant (car vous ne voulez pas vous occuper des images et des icônes dans le webpack pour le moment)

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

Copier après la connexion

Remplacez ensuite le contenu dans index.js avec le code suivant (supprimer 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;));

Copier après la connexion

Puis supprimez registerServiceWorker.js sous src (ce fichier est utilisé pour construire des applications pwa, nous ne pouvons pas l'utiliser pour le moment) et le logo Fichiers .svg (vous ne souhaitez pas traiter les fichiers image) et App.test js (pour les tests).

Il y a maintenant quatre fichiers sous src/. Ensuite, créez deux nouveaux dossiers app1 et app2 sous src et copiez les quatre fichiers d'origine respectivement dans app1 et app2. Le répertoire des fichiers est le suivant :

Ensuite, accédez au fichier public, supprimez favicon.ico (je ne veux pas m'en occuper) et manifestez-vous. json (utilisé pour construire pwa), puis remplacez le contenu dans index.html par le contenu suivant :

<!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>

Copier après la connexion

Cet index.html est notre modèle html.

Allez droit au but et commencez à installer webpack et à configurer webpack

1. Installer les dépendances. Remplacez le fichier package.json par le fichier suivant

{
 "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"
 }
}

Copier après la connexion

2. Supprimez node_modules dans le répertoire actuel, puis exécutez-le à nouveau sur la console

npm i

Copier après la connexion

3. répertoire racine Créez simplement un nouveau fichier webpack.config.js sous /demo et écrivez le code suivant

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;

Copier après la connexion

4 Ensuite, exécutez directement le code suivant