react, webpack, cross-domain proxy multi-page

I am new to React and use webpack for engineering development and management. I encountered some problems, such as multi-page processing, cross-domain proxy settings, and how to introduce and use jQuery at the same time. The first time I tried the water, I simply wrote a table component.

First follow the tutorial provided by the react official website and use create-react-app to create a react project

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

cd my-app
npm start

OK, the first react program ran, and then the first question came, this It is a single-page application. According to past development experience, since the platform to be developed will be more complex, it needs to be made into multiple pages. How to configure it into multiple pages:

Change the package in the my-app directory. json file (this file determines the dependencies that need to be installed during front-end engineering development, including react, which is also installed here)
Attached is my 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"
}

Let’s put the original directory Delete the node_modules folder, and then run

npm i

in the directory where package.json is located. The node_modules folder will be automatically generated and the dependencies we defined in package.json will be installed.
In package.json, you can see that I want to install the jqeury dependency. I will talk about this later. Another thing I want to talk about is this sentence

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

Here we specify the npm command script, and the corresponding running commands are npm start and npm run build (be sure to add run, I didn’t bring run when I first learned to run, I haven't been able to escape, and I have been confused by this for a long time o(╥﹏╥)o)

In npm start, we specified that the application should be run with the dev server of webpack, and a server will be started. This is very fun to use when developing. After editing the code and saving it, it will be hot updated. The front-end code will be automatically rebuilt and the browser will be notified to refresh. At this time, the packaged file is generated in memory, so don’t bother to look for it in the directory. You can’t find it at all. o(￣︶￣)o

After running npm run build It is used to actually generate files packaged by webpack. You can specify the output directory. For details, refer to webpack.config.js. The files generated by this command can be placed in the static file directory specified by the backend server. These are the files used to go online.

Take another look at my webpack.config.js. This file is used to tell webpack how to build the front-end project, how to package it, 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;

Related recommendations:

Vue+webpack basic configuration sharing

Detailed explanation of Webpack server-side code packaging examples

webpack, vue, Node implements single page code sharing

#

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