ホームページ > 記事 > ウェブフロントエンド > 反応、Webpack、クロスドメインプロキシマルチページ

反応、Webpack、クロスドメインプロキシマルチページ

小云云オリジナル: 2018-02-23 10:25:193004ブラウズ

私は React を初めて使用し、エンジニアリング開発と管理に webpack を使用しています。マルチページ処理、クロスドメインプロキシ設定、jQuery を同時に導入して使用する方法など、いくつかの問題に遭遇しました。初めて水を試したとき、私は単純にテーブルコンポーネントを書きました。

まず、react 公式 Web サイトが提供するチュートリアルに従い、create-react-app を使用して React プロジェクトを作成します

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

cd my-app
npm start

OK、最初の React プログラムが実行され、最初の質問が表示されました。これは単一ページのアプリケーションです。いつものように、開発経験、開発するプラットフォームはより複雑で複数のページにする必要があるため、複数のページに構成する方法:

my-app ディレクトリの package.json ファイルを変換します (このファイルフロントエンドエンジニアリング開発を決定します。react を含め、インストールする必要がある依存関係もここにインストールされます)
私の 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"
}

が添付されています

元のディレクトリにある node_modules フォルダーを削除し、 package.json が配置されているディレクトリ

npm i

node_modules フォルダーが自動的に生成され、package.json で定義した依存関係がインストールされます。
package.json では、jqeury の依存関係をインストールする必要があることがわかります。これについては後ほど説明します。もう 1 つ話したいのはこの文です

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

ここでは npm コマンドスクリプトを指定しています。対応する実行コマンドは npm start と npm run build (必ず run を追加してください) です。私が最初に実行を学んだとき、私は実行しませんでした。 run が付いていないので実行できませんでしたが、長い間これで混乱していましたo(╥﹏╥)o)

npm start でアプリケーションを実行するように指定しました。 webpack の dev サーバーにアクセスすると、サーバーが起動します。これは、開発時に使用すると非常に楽しくなります。コードを編集して保存すると、フロントエンドコードが自動的に再構築され、ブラウザに更新が通知されます。このとき、パッケージ化されたファイルはメモリ上に生成されるので、わざわざディレクトリ内を探しても見つかりませんo(￣︶￣)o

実際の生成にはnpm run buildを使用します。ファイルを実行した後に webpack パッケージを作成すると、出力ディレクトリを指定できます。詳細については、webpack.config.js を参照してください。このコマンドによって生成されたファイルは、バックエンドサーバーによって指定された静的ファイルディレクトリに配置できます。これらはオンラインにするために使用されるファイルです。

私の webpack.config.js をもう一度見てください。このファイルは、フロントエンドプロジェクトのビルド方法、パッケージ化方法などを webpack に伝えるために使用されます。

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;

反応、Webpack、クロスドメイン プロキシ マルチページ

関連記事

反応、Webpack、クロスドメインプロキシマルチページ