reagieren, Webpack, domänenübergreifender Proxy mehrseitig

Ich bin neu bei React und verwende Webpack für die technische Entwicklung und Verwaltung. Ich bin auf einige Probleme gestoßen, z. B. auf die mehrseitige Verarbeitung, domänenübergreifende Proxy-Einstellungen und die gleichzeitige Einführung und Verwendung von jQuery. Als ich das Wasser zum ersten Mal probierte, schrieb ich einfach eine Tabellenkomponente.

Befolgen Sie zunächst das Tutorial auf der offiziellen React-Website und erstellen Sie mit der Create-React-App ein React-Projekt.

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

OK, das erste React-Programm wurde ausgeführt und dann die erste Frage Aufgrund früherer Entwicklungserfahrungen muss die zu entwickelnde Plattform in mehrere Seiten unterteilt werden:

Ändern Sie die Datei package.json im My-App-Verzeichnis (diese Datei bestimmt die Abhängigkeiten, die Sie während der Front-End-Engineering-Entwicklung installieren müssen, einschließlich React, das ebenfalls hier installiert wird)
Angehängt ist meine package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "pack test",
  "main": "index.js",
  "dependencies": {
    "expose-loader": "^0.7.4",
    "jquery": "^3.2.1",
    "webpack": "^3.10.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.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",
    "jquery": "^3.2.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.8.1"
  },
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "author": "albert",
  "license": "ISC"
}

Uns Löschen Sie den Ordner „node_modules“ im Originalverzeichnis und führen Sie dann „

npm i

“ in dem Verzeichnis aus, in dem sich „package.json“ befindet. Der Ordner „node_modules“ und die von uns definierten Abhängigkeiten werden automatisch generiert package.json wird installiert.
Sie können in package.json sehen, dass ich die jqeury-Abhängigkeit installieren möchte. Darüber werde ich später sprechen. Eine andere Sache, über die ich sprechen möchte, ist dieser Satz

"scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }

Hier geben wir das npm-Befehlsskript an, und die entsprechenden laufenden Befehle sind npm start und npm run build (stellen Sie sicher, dass Sie run hinzufügen, das habe ich nicht getan). Bring es mit, als ich zum ersten Mal laufen lernte, ich konnte nicht auslaufen, das hat mich schon lange verwirrt o(╥﹏╥)o)

In npm start haben wir angegeben dass der Entwicklungsserver von Webpack zum Ausführen verwendet wird und ein Server gestartet wird. Dies macht beim Entwickeln sehr viel Spaß. Nach dem Bearbeiten und Speichern des Codes wird der Front-End-Code automatisch neu erstellt und der Browser wird zur Aktualisierung aufgefordert. Zu diesem Zeitpunkt werden die gepackten Dateien im Speicher generiert, also machen Sie sich nicht die Mühe, im Verzeichnis zu suchen. Sie können sie überhaupt nicht finden >Nach dem Ausführen von npm run build Es wird verwendet, um tatsächlich von Webpack gepackte Dateien zu generieren. Weitere Informationen finden Sie in webpack.config.js. Die durch diesen Befehl generierten Dateien können in dem vom Backend-Server angegebenen statischen Dateiverzeichnis abgelegt werden. Dies sind die Dateien, die zum Online-Gehen verwendet werden. Schauen Sie sich noch einmal meine webpack.config.js an. Diese Datei wird verwendet, um Webpack mitzuteilen, wie das Front-End-Projekt erstellt, verpackt werden soll usw.

Verwandt Empfehlungen:

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/'),
    path:path.resolve('C:/wamp64/www/path/'),
    filename:'[name].[chunkhash:6].js'
  },
  //设置开发者工具的端口号,不设置则默认为8080端口
  devServer: {
    inline: true,
    port: 8181,
    proxy: {
        '/': {
            target: 'http://localhost:80',
            secure: true,
            changeOrigin: true
        }
    }
  },
  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"})
      },
      {
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
      }
       
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].[chunkhash:6].css"),
    new CleanWebpackPlugin(
      ['path'],　
      {
        root: 'C:/wamp64/www/',    　　　　　　　　　　
        verbose: true,    　　　　　　　　　　
        dry:   false    　　　　　　　　　　
      }
    )
  ],
};
 
// 获取指定路径下的入口文件
function getEntries(globPath) {
  const files = glob.sync(globPath),
   entries = {};
   console.log(files)
  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;

Freigabe der Grundkonfiguration von Vue+Webpack

Detaillierte Erläuterung von Beispielen für die serverseitige Codeverpackung von Webpack

Webpack, Vue und Node realisieren die gemeinsame Nutzung von Einzelseitencode

Das obige ist der detaillierte Inhalt vonreagieren, Webpack, domänenübergreifender Proxy mehrseitig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!