웹 팩 구축 react 다 중 페이지 응용 상세 설명

7023 단어 webpackreact.다 중 페이지
이 글 을 쓰 는 취 지 는 간결 한 프로젝트 비 계 를 찾기 어렵 다 는 것 이다.많은 비 계 는 의존 이 많 고 의존 만 봐 도 오래 걸 리 기 때문에 인터넷 의 내용 을 참조 하여 이렇게 간단 하고 여러 페이지 의 비 계 를 만 드 는 것 이다.
creat-react-app 를 이용 하여 react 응용 프로그램 을 새로 만 듭 니 다.

npm install -g create-react-app
그리고 프로젝트 를 만 듭 니 다.

create-react-app demo
create-react-app 는 비 계 를 자동 으로 초기 화하 고 React 프로젝트 의 각종 의존 도 를 설치 합 니 다.이 과정 에서 네트워크 문제 가 발생 하면 cnpm 타 오 바 오 미 러 로 설치 하 십시오.
그리고 우 리 는 프로젝트 에 들 어가 서 시작 했다.

cd demo
그리고 프로젝트 를 시작 합 니 다.

npm start
그러면 다음 페이지 가 보 입 니 다.

그리고 src/App.js 에 들 어가 서 App.js 의 코드 를 아래 코드 로 교체 합 니 다.(webpack 에서 그림 과 icon 을 처리 하고 싶 지 않 기 때 문 입 니 다)

import React, { Component } from 'react';
import './App.css';

class App extends Component {
 render() {
  return (
   <div className="App">
    <div className="App-header">
     <h2>Welcome to App</h2>
    </div>
    <p className="App-intro">
     To get started, edit <code>src/App.js</code> and save to reload.
    </p>
   </div>
  );
 }
}

export default App
그리고 index.js 의 내용 을 다음 코드 로 바 꿉 니 다.(registerServiceWorker 삭제)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));
그리고 src 아래 registerServiceWorker.js(이 파일 은 pwa 응용 프로그램 을 구축 하 는 데 사 용 됩 니 다.당분간 사용 할 수 없습니다)와 logo.svg 파일(그림 파일 을 처리 하고 싶 지 않 습 니 다)과 App.test.js(테스트 용)를 삭제 합 니 다.
현재 src/아래 에 네 개의 파일 이 있 습 니 다.다음은 src 아래 에 두 개의 폴 더 app 1 과 app 2 를 새로 만 들 고 각각 네 개의 파일 을 app 1 과 app 2 에 복사 합 니 다.파일 디 렉 터 리 는 다음 과 같 습 니 다.

다음은 Public 파일 에 들 어가 서 favicon.ico(처리 하고 싶 지 않 음)와 manifest.json(pwa 구축 용)을 삭제 하고 index.html 의 내용 을 다음 과 같이 바 꿉 니 다.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <title>React App</title>
 </head>
 <body>
  <noscript>
   You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
 </body>
</html>
이 index.html 가 바로 우리 의 모델 html 입 니 다.
본론 으로 들 어가 서 웹 팩 을 설치 하고 웹 팩 을 설정 합 니 다.
1.설치 의존.package.json 파일 을 아래 파일 로 대체 합 니 다.

{
 "name": "demo",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.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",
  "webpack": "^3.5.6",
  "webpack-dev-server": "^2.8.1"
 },
 "scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack"
 }
}
2.현재 디 렉 터 리 의 node 삭제modules,그리고 다시 콘 솔 에서 실행

npm i
3.루트 디 렉 터 리 아래/demo 아래 웹 팩.config.js 파일 을 새로 만 들 고 다음 코드 를 기록 합 니 다.

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/'),
    filename:'[name].[chunkhash:6].js'
  },
  //           ,       8080  
  devServer: {
    inline: true,
    port: 8181
  },
  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"})
      },
      
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].[chunkhash:6].css"),
    new CleanWebpackPlugin(
      ['dist'],　 
      {
        root: __dirname,    　　　　　　　　　　
        verbose: true,    　　　　　　　　　　
        dry:   false    　　　　　　　　　　
      }
    )
  ],
};

//             
function getEntries(globPath) {
  const files = glob.sync(globPath),
   entries = {};
  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;
4.그리고 다음 코드 를 직접 실행 합 니 다.

npm run build
dist 에서 두 페이지 의 app 1 과 app 2 를 성공 적 으로 보 았 습 니 다.
npm run start 를 직접 사용 하려 면 localhost:8181/app1.html 에서 페이지 를 보고 디 버 깅 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
EasyUI 생 성 인원 트 리 의 인 스 턴 스 코드
Vue 의 간단 한 경로 전달 방법 을 상세 하 게 설명 하 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage