Webpack, Wordpress 및 BrowserSync가 함께 작동하도록 하는 방법

Webpack, Wordpress 및 BrowserSync가 함께 작동하도록 하는 방법

일주일 정도 했는데 세 명이 같이 일하지 못했어요.누가 도와주면 평생 감사할 거예요. 너무 많은 시간을 허비했어요.

문제:
myserver.dev를 프록시하면 404가 핫 새로고침 됩니다.publicPath를 변경해도 아무 일도 일어나지 않습니다.URL을 webpack-hot-middleware/client에 첨부하면 경로가 수정되지만 hmr 파일에 정보가 없는 콘솔에서 "GET" 오류가 발생합니다.HTML을 유지하고 php/MAMP를 무시하면 핫 새로고침은 정상적으로 동작합니다.전반적으로 매우 혼란스러워서 아마 간단한 개념을 놓치고 있는 것 같습니다.

내가 함께 일하기 위해 노력하고 있는 것:
- REST API용 워드프레스
- 보기 및 UI에 대한 반응
- localhost 및 MySQL용 MAMP
- Browser Sync를 통한 디바이스 간 테스트
- 컴파일 및 핫 새로고침용 웹 팩

이게 제가 사용한 보일러 플레이트입니다. https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader

테마 디렉토리 구조:
-/inc
-/src
--/컴포넌트
--/실행자
--/스타일
-- app.displays(앱.discloss)
- syslog.syslog.displaces
- - - 。php
-index.interface
- - - 。json
- server.syslog
- style.css
- webpack . config . displays .

수많은 구성을 시도했으므로 단순화를 위해 아래 코드를 삭제했습니다.

webpack.config.disc:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),

  entry: [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    './app'
  ],

  output: {
    path: __dirname,
    publicPath: __dirname,
    filename: 'bundle.js'
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],

  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }
    ]
  }
};

server.displays:

/**
 * Require Browsersync along with webpack and middleware for it
 */
var browserSync = require('browser-sync');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

/**
 * Require ./webpack.config.js and make a bundler from it
 */
var webpackConfig = require('./webpack.config');
var bundler = webpack(webpackConfig);

/**
 * Run Browsersync and use middleware for Hot Module Replacement
 */
browserSync({
    proxy: {
      target: 'http://myserver.dev',
      middleware: [
        webpackDevMiddleware(bundler, {
          // IMPORTANT: dev middleware can't access config, so we should
          // provide publicPath by ourselves
          publicPath: webpackConfig.output.publicPath,

          // pretty colored output
          stats: { colors: true }

          // for other settings see
          // http://webpack.github.io/docs/webpack-dev-middleware.html
        }),

        // bundler should be the same as above
        webpackHotMiddleware(bundler)
      ]
    },

    // prevent opening a new window.
    open: false,

    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: [

    ]
});

패키지.json:

{
  "main": "server.js",
  "scripts": {
    "build": "webpack",
    "start": "node ."
  },
  "dependencies": {
    "babel-core": "^5.8.9",
    "babel-loader": "^5.3.2",
    "browser-sync": "^2.8.0",
    "react": "^0.13.3",
    "react-hot-loader": "^1.2.8",
    "webpack": "^1.10.5",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^1.1.0"
  }
}

2018년 중반까지 새로운 버전의 Webpack과 BrowserSync for Wordpress로 상황이 바뀌었을지도 모르지만, JS, CSS, PHP를 위한 라이브 새로고침 기능이 있는 매우 심플하고 현대적인 Wordpress용 Webpack과 BrowserSync 레시피가 있습니다.이것은 React를 사용하지만 React 설정에 한정되지 않고 ES6 모듈 Import/export만 합니다.

폴더 구조:

theme
⊢⊸ api
  ⊢⊸ models
  ⊢⊸ controllers
  ⊢⊸  index.php
⊢⊸ frontend
  ⊢⊸ src
    ⊢⊸ App.js
    ⊢⊸ App.css
    ⊢⊸ index.js
  ⊢⊸ .babelrc
  ⊢⊸ package.json
  ⊢⊸ postcss.config.js
  ⊢⊸ webpack.config.js
  ⊢⊸ yarn.lock
⊢⊸ main.js
⊢⊸ functions.php
⊢⊸ index.php
⊢⊸ style.css

패키지json:

"scripts": {
  "start": "webpack --mode development --watch",
  "build": "webpack --mode production"
},
"devDependencies": {
  "autoprefixer": "^8.5.0",
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.7.0",
  "babel-preset-react": "^6.24.1",
  "browser-sync": "^2.24.4",
  "browser-sync-webpack-plugin": "^2.2.2",
  "css-loader": "^0.28.11",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "postcss-loader": "^2.1.5",
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "style-loader": "^0.21.0",
  "webpack": "^4.8.3",
  "webpack-cli": "^2.1.3",
  "webpack-dev-server": "^3.1.4"
}

Webpack.config.json

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, './../'),
    filename: 'main.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    openPage: '',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader', 'postcss-loader']
          }
        )
      }
    ]
  },
  plugins: [ 
    new ExtractTextPlugin({filename: 'style.css'}),
    new BrowserSyncPlugin({
      files: [
        './../',
        './../api/**/*.php',
        './../api/*.php',
        './', 
        '!./node_modules',
        '!./yarn-error.log',
        '!./package.json',
        '!./style.css.map',
        '!./app.js.map'
      ],
      reloadDelay: 0
    })
  ]
};

Postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

.babelrc

{
  "presets": ["env", "react"]
}

기타 권장 사항으로는 모든 JS 프로젝트에서 코드 포맷을 위한 사전 커밋(Lint-Staged 및 Husky 사용)이 있습니다..gitignoreWP용 ACF Builder가 개발되었습니다.

잘 만들어진 답변은 아니지만 WordPress에서 ESNext, React, Webpack을 시작하기 위한 매우 기본적인 웹팩을 구텐베르크 보일러 플레이트에 설치했습니다.

블록 #02와 그 구성을 확인합니다.

https://css-tricks.com/combine-webpack-gulp-4/ 링크에서 답변해드리고 싶습니다.

이 기사는 그 문제를 해결하는 데 필요한 모든 것을 다루고 있다.나한테는 잘 먹힌다.단, gulp을 사용합니다만, 설정으로부터 그것을 떼어내, 조금 해킹을 할 수 있습니다.셋업의 기본은 모두 갖추어져 있습니다.

언급URL : https://stackoverflow.com/questions/41236299/how-to-get-webpack-wordpress-and-browsersync-to-work-together