집 > 기사 > 웹 프론트엔드 > 반응, 웹팩, 크로스 도메인 프록시 다중 페이지

반응, 웹팩, 크로스 도메인 프록시 다중 페이지

小云云원래의: 2018-02-23 10:25:193024검색

React를 처음 접하고 엔지니어링 개발 및 관리를 위해 webpack을 사용하고 있습니다. 다중 페이지 처리, 도메인 간 프록시 설정, jQuery를 동시에 도입하고 사용하는 방법 등 몇 가지 문제가 발생했습니다. 처음 물을 먹어봤을 때 간단하게 테이블 컴포넌트를 작성했습니다.

먼저 React 공식 웹사이트에서 제공하는 튜토리얼을 따르고 create-react-app을 사용하여 React 프로젝트를 만듭니다

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

cd my-app
npm start

좋아, 첫 번째 React 프로그램이 실행되고 첫 번째 질문이 나왔습니다. 이것은 단일 페이지 애플리케이션입니다. 평소 개발 경험처럼 개발할 플랫폼이 더 복잡해지고 여러 페이지로 구성되어야 하므로 여러 페이지로 구성하는 방법:

my-app 디렉터리의 package.json 파일을 변환합니다(이 파일에 따라 프론트 엔드 엔지니어링 개발 반응을 포함하여 설치해야 할 종속성도 여기에 설치됩니다)
첨부된 파일은 내 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 종속성을 설치하려는 것을 볼 수 있습니다. 이에 대해서는 나중에 이야기하겠습니다. 또 이야기하고 싶은 것은 이 문장입니다.

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

여기서 npm 명령 스크립트를 지정했으며 해당 실행 명령은 npm start 및 npm run build입니다(반드시 run을 추가하세요. 처음 실행하는 법을 배울 때 't import run with it, 그래서 실행할 수 없었습니다. , 나는 이것 때문에 오랫동안 혼란스러워했습니다. o(╥﹏╥)o)

npm start에서 우리는 애플리케이션이 다음과 같이 실행되도록 지정했습니다. webpack의 개발 서버와 서버가 시작됩니다. 개발할 때 사용하면 매우 재미있습니다. 코드를 편집하고 저장하면 프런트엔드 코드가 자동으로 다시 빌드되고 브라우저에 새로 고침 알림이 표시됩니다. 이때 패키징된 파일은 메모리에 생성되므로 굳이 디렉토리에서 검색하지 않아도 전혀 찾을 수 없다. 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;

반응, 웹팩, 크로스 도메인 프록시 다중 페이지

관련 기사