https://lamosty.com/2015/10/26/react-wp-theme-structure-node-packages-and-webpack/

자습서의 두 번째 부분에서는 테마의 초기 폴더 / 파일 구조, 필요한 노드 패키지 설치, Webpack 구성 및 핫 리로드를 통한 노드 개발 서버 설정에 대해 설명합니다. Redux 기반 WordPress 테마를 올바르게 부트 스트랩하는 방법을 알려 드리겠습니다. 이 기사의 끝 부분에서 프로젝트가 어떻게 보이는지 보려면 GitHub 저장소 (branch 1_structure_node_webpack)를보십시오. 

Tutorial navigation

Theme folder structure

글쎄, 나는 거짓말을 했습니다.. 개발 의존성은 어떻습니까? 그래, 우리도 필요합니다. 가장 중요한 앱은 완성 된 앱을 만들고 출력하는 Webpack입니다. 로더와 플러그인이 없으면 Webpack은 거의 사용되지 않습니다. 설치해야 합니다. 

• `babel-loader` : React JSX와 ES6를 처리합니다. `babel-core`도 설치하십시오.
  
• `css-loader` : 다른 라이브러리와 마찬가지로 CSS를로드 할 수 있습니다. `import '../css/bootstrap.css';`.
  
• `extract-text-webpack-plugin` : 자바 스크립트에서 CSS를 사용하는 대신 Webpack은 그것을 별도의 파일로 출력합니다.
  
• `file-loader` : 이미지와 같은 정적 파일을 로딩 할 때 사용합니다.
  
• `style-loader` : 이것과`css-loader`의 차이는 무엇입니까? 나는 정직하게 모른다.
  
• `html-webpack-plugin` : 우리의 앱과 CSS로 메인 HTML 파일을 생성하여 개발 목적으로 유용합니다.
  
• `react-hot-loader` : 가장 멋진 것들 중 하나. React 구성 요소 (또는 Redux 감속기)를 변경할 때 더 이상 페이지를 새로 고칠 필요가 없습니다. 수정 된 파일을 저장할 때 자동으로 새로 고칩니다.
  
• `webpack-dev-server` : 개발 용 작은 서버.
  

한숨이 나옵니다., 그게 많은 새로운 것들을 파악합니다.   지금 걱정하지 마라고 말해드리고 싶습니다. 방법을 따라 작업하는 방법을 볼 수 있습니다. 게다가, 당신은 실제로 어떻게 작동하는지 각각 이해할 필요가 없습니다. 단지 그것을 사용할 수 있어야합니다. 

{
  "name": "Lexi-WP-Theme",
  "version": "0.0.1",
  "description": "",
  "license": "MIT",
  "dependencies": {
    "history": "^1.9.0",
    "isomorphic-fetch": "^2.1.1",
    "react": "^0.14.0-rc1",
    "react-redux": "^3.0.1",
    "react-router": "1.0.0-rc1",
    "redux": "^3.0.2",
    "redux-thunk": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^5.6.18",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.18.0",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.4",
    "html-webpack-plugin": "^1.6.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.11",
    "webpack-dev-server": "^1.9.0"
  },
  "scripts": {
    "clean": "rm -rf dist",
    "build": "npm run clean && webpack",
    "start": "npm run build && node server.js"
  }
}

파일을 테마의 디렉토리에 복사하고 명령 행에서 npm install을 실행하십시오. 모든 패키지는 잠시 동안 설치해야합니다. 좋아, 더 흥미로운 주제로 옮기자. Webpack!

Configuring Webpack

Webpack의 순진한 모양의 홈페이지에 속지 마십시오. 진지하게 짐승이 있습니다. 페이스 북 (Instagram)조차도 그것을 사용하고 있으며, 그것으로 작업하는 방법에 관해 꽤 괜찮은 가이드를 작성했습니다. 읽으신 후 (간략하게) 여기에 계속하십시오. 끝난? 차갑게, 이제 당신은 왜 Webpack이 흔들리는 지 알게됩니다.

무작위로 wepback.config.js Webpack 구성 파일을 처음 보았을 때, 그것은 러시아어와 같은 중국인처럼 보였습니다. 나는 그걸 복사해서 붙여 넣기를 시작했다. 그런 다음 npm을 실행하고 충돌하는 것을 지켜 보았다. 결국, 나는 그것을 작동하게하고 여기 내 결과입니다.

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.template.html',
            inject: true
        }),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot', 'babel'],
                exclude: /node_modules/,
                include: __dirname
            }, {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            }, {
                test: /\.png$/,
                loader: "url-loader?limit=100000"
            }, {
                test: /\.jpg$/,
                loader: "file-loader"
            }, {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader'
            }
        ]
    }
};

가장 먼저 눈에 띄는 점은 자바 스크립트가 매우 훌륭하다는 것입니다. 파일의 시작 부분에 몇 개의 라이브러리가 필요합니다. 그런 다음 JS 객체 (Webpack 구성)를 내 보냅니다. 

• `devtool : 'source-maps'는 Webpack이 JS & CSS 파일의 소스 맵을 생성한다는 것을 의미합니다.
  
• `entry`는 웹 어플리케이션의 메인 (엔트리 포인트) 파일을 지정합니다. `./src/index.js` 파일이 될 것입니다. 다음 튜토리얼에서 만들 것입니다. 다른 두 줄 (`webpack-dev-server`)은 개발 서버를 설정합니다. 필요한 경우 포트를 변경하십시오 (기본값은 3000입니다).
  
• `output`은 Webpack이 컴파일 된 파일을 저장해야하는 경로를 설정합니다. 우리는 이것을`dist /`폴더로 설정하고 Webpack에게 모든 것을`bundle.js` 파일에 넣도록 지시합니다. `publicPath`는 우리가 루트 경로에 있다고 말합니다.
  
• `plugins`은 우리가 사용하는 Webpack 플러그인 목록입니다. `HotModuleReplacementPlugin`은 React / Redux 코드의 핫 리로딩을위한 것입니다. `HtmlWebpackPlugin`은`src /`폴더 (`. /src/index.template.html`)에있는 HTML 템플릿의`dist /`폴더에`index.html` 파일을 생성합니다. `inject : true`는 모든 애셋 (css와 js 모두)을 index.html 파일의 헤드에 삽입합니다.
  
• `NoErrorsPlugin`은 오류가있는 자산이 출력되지 않도록 오류와 관련이 있습니다. 더 많은 것을 읽으십시오.
  
• 마지막으로,`ExtractTextPlugin`은 모든 가져온 CSS 파일을 하나의`style.css` (`allChunks : true`)로 옮깁니다.
  

이제 로더들. 로더는 가져온 자산을 처리하는 방법을 알고있는 웹팩 "플러그인"입니다. 다른 빌드 도구 (예 : Grunt)의 '작업'과 유사합니다. 우리를 위해, 그들과 함께 일하는 법을 배우는 것으로 충분합니다. 첫 번째 로더를 타고 가깝게 조사해 봅시다.

{
 test: /.js$/,
 loaders: ['react-hot', 'babel'],
 exclude: /node_modules/,
 include: __dirname
}

로더를 사용하는 것은 몇 개의 키를 가진 JS 객체를 작성하는 것입니다.

• `test : /.js$/`는 로더가 처리해야하는 파일을 선택하는 데 사용되는 간단한 정규식입니다. 이 경우이 로더는`.js` 파일 확장자로 끝나는 파일에만 적용됩니다.
  
• `loaders : [ 'react-hot', 'babel']`: 일치하는 파일 (이 경우 가져온 모든 JS 파일)에서 호출해야하는 로더를 지정합니다. `react-hot`은 React 컴포넌트의 핫 리로딩에 사용됩니다. Babel은 강력한 JS 컴파일러로 ES6 (모든 최신 브라우저에서 지원)로 컴파일 된 ES6 JavaScript를 작성하고 JSX를 사용하여 React 구성 요소를 작성 (표준 JS 객체로 컴파일) 할 수 있습니다.
  
• `exclude : /node_modules/`는 Webpack이 설치된 라이브러리를 포함하고있는`node_modules/`폴더를 무시하도록 지시합니다 (위의 노드 챕터에서 이 작업을했습니다).
  
• 마지막으로,`include : __dirname`은 Webpack이 테마의 루트 폴더에있는 .js 파일을 찾아야한다고 말합니다 (`__dirname`은 현재 실행중인 스크립트가 상주하는 디렉토리입니다).
  

다른 로더는 웹 응용 프로그램의 다른 부분을 다루는 것을 제외하고는 동일한 구조를 따릅니다. 그들에게 조금 공부하고 계속 전진하십시오.

Setting up development server

이 튜토리얼에서 마지막으로 할 일은 개발 서버를 설정하는 것이다. 이미 WordPress (PHP) 서버가 실행 중이어야합니다 (EasyEngine 또는 Ansible 사용). 우리가 여기서 설정할 dev 서버는 PHP가 아닙니다. Node.js입니다. 우리는 일하는 뜨거운 재 장전을 위해 그것을 필요로한다. 이런 식으로 웹 애플리케이션을 코딩하는 것이 더 쉽고 즐겁습니다. 프로덕션 서버로 옮기면 PHP 만 사용하십시오.

server.js 파일에 전체 dev 서버를 구성합니다. 그것을보십시오 :

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    stats: {
        colors: true
    }
}).listen(3000, 'localhost', function(err) {
    if (err) {
        console.log(err);
    }

    console.log('Listening at localhost:3000');
});

처음 몇 줄에서는 Webpack 및 Webpack-dev-server 라이브러리를 가져옵니다. 세 번째 줄에서는 앞에서 작성한 Webpack의 구성 파일도 가져옵니다. 우리는 몇 가지 상수가 필요할 것입니다.

다음으로 새로운 객체 인 WebpackDevServer를 인스턴스화하여 webpack 객체와 구성 객체를 전달합니다.

• `publicPath`는 Webpack 설정 파일의`publicPath`와 같은 값으로 설정됩니다.
  
• `hot : true`는 핫 리로딩을 가능하게합니다.
  
• `historyApiFallback`은 아마도 사용자의 브라우저가 HTML5 History API를 지원하지 않으면 "hashtag" API를 사용할 것입니다. 그러나 나는 모릅니다.
  

그런 다음 localhost:3000에서 수신하도록 구성하고 오류가 있으면 브라우저의 콘솔에 출력합니다.

Conclusion

글쎄, 그게 오늘이야. 웹 애플리케이션이 작동하기 위해 필요한 Node 패키지를 배웠다. 또한 Webpack을 사용하고 구성하는 방법을 배웠습니다. 마지막으로 간단하지만 유용한 dev 서버를 설정하는 방법을 살펴 보았습니다. 단일 세션에서 많은 정보를 얻었 기 때문에 기사를 다시 읽고 내가 제공 한 링크를 연구 해보십시오. 가장 중요한 것은, 모든 것을 이해하지 못할 때 자신에게 열심히하지 마십시오. 그것에 대해 쓸 수 있기까지 몇 주가 걸렸습니다.

다음 기사에서는 React, React-Router 및 Redux로 시작하는 실제 웹 애플리케이션을 빌드하기 시작합니다. 계속 지켜봐!

또한, 제발, 제발, 아래의 의견에 물어보십시오. 나는 내가 어떤 주제에 깊이 관여하지 않았다는 것을 알고 있으며 주석은 그것들을 탐구하는 가장 좋은 방법이라는 것을 알고있다. 좋은 대화를 나누자.