réagir, webpack, proxy inter-domaines multi-pages-js tutoriel-php.cn

réagir, webpack, proxy inter-domaines multi-pages

小云云

Libérer： 2018-02-23 10:25:19

original

2971 Les gens l'ont consulté

Je suis nouveau sur React et j'utilise webpack pour le développement et la gestion technique. J'ai rencontré certains problèmes, tels que le traitement multipage, les paramètres de proxy inter-domaines et la façon d'introduire et d'utiliser jQuery en même temps. La première fois que j'ai essayé l'eau, j'ai simplement écrit un composant de table.

Suivez d'abord le tutoriel fourni par le site officiel de React et utilisez create-react-app pour créer un projet de réaction

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

cd my-app
npm start

Copier après la connexion

OK, le premier programme de réaction s'est exécuté, puis la première question come , il s'agit d'une application d'une seule page. D'après l'expérience de développement passée, puisque la plateforme à développer sera plus complexe, elle doit être composée de plusieurs pages :

. Modifiez le fichier package.json du répertoire my-app (ce fichier détermine les dépendances que vous devez installer lors du développement de l'ingénierie front-end, y compris React, qui est également installé ici)
Ci-joint mon 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"
}

Copier après la connexion

Nous supprimons le dossier node_modules dans le répertoire d'origine, puis exécutons

npm i

Copier après la connexion

dans le répertoire où se trouve package.json. Le dossier node_modules sera automatiquement généré et les dépendances que nous avons définies dans. package.json sera installé.
Vous pouvez voir dans package.json que je souhaite installer la dépendance jqeury, j'en parlerai plus tard. Une autre chose dont je veux parler est cette phrase

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

Copier après la connexion

Ici, nous spécifions le script de commande npm, et les commandes en cours d'exécution correspondantes sont npm start et npm run build (assurez-vous d'ajouter run, je ne l'ai pas fait apporte-le quand j'ai appris à courir, je n'ai pas pu m'épuiser, j'ai été confus par ça pendant longtemps o(╥﹏╥)o)

Dans npm start, nous avons précisé que le serveur de développement de webpack est utilisé pour s'exécuter et qu'un serveur sera démarré. C'est très amusant à utiliser lors du développement. Après avoir modifié le code et l'avoir enregistré, il sera mis à jour à chaud et le navigateur sera automatiquement reconstruit pour s'actualiser. À l'heure actuelle, les fichiers packagés sont générés en mémoire, alors ne vous embêtez pas à chercher dans le répertoire, vous ne le trouvez pas du tout o(￣︶￣)o

Après avoir exécuté npm run build Il est utilisé pour générer des fichiers empaquetés par webpack. Vous pouvez spécifier le répertoire de sortie. Pour plus de détails, reportez-vous à webpack.config.js. Les fichiers générés par cette commande peuvent être placés dans le répertoire de fichiers statiques spécifié par le serveur backend. Ce sont les fichiers utilisés pour se connecter.

Jetez un autre œil à mon webpack.config.js. Ce fichier est utilisé pour indiquer à webpack comment construire le projet front-end, comment le packager, etc.

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;

Copier après la connexion

Connexe. recommandations :

Partage de configuration de base de Vue+webpack

Explication détaillée des exemples d'empaquetage de code côté serveur Webpack

webpack, vue et node réalisent le partage de code sur une seule page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!