admin管理员组文章数量:1318021
I've been at it for about a week now and I haven't been able to get the three to work together. I'll be eternally grateful if anyone can help me with this, I've wasted so many hours.
The issue:
If I proxy myserver.dev hot reloading 404s. Changing the publicPath does nothing. I attach the url to webpack-hot-middleware/client, it fixes the path, but the hmr file ends up having a "GET" error in console with no info. Hot reloading works fine if I keep it HTML and disregard any php/MAMP. I'm overall really confused and I'm probably missing a simple concept.
What I'm trying to get to work together:
- Wordpress for its REST API
- React for views and ui
- MAMP for localhost & MySQL
- BrowserSync for testing across devices
- Webpack for piling and hot reloading
This is the boilerplate I used: .react-hot-loader
Theme Directory Structure:
-/inc
-/src
--/ponents
--/containers
--/styles
--app.js
-bundle.js
-functions.php
-index.php
-package.json
-server.js
-style.css
-webpack.config.js
I've tried a million configurations so I gutted the code below for simplicities sake.
webpack.config.js:
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.js:
/**
* 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: '',
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
// .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: [
]
});
package.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"
}
}
I've been at it for about a week now and I haven't been able to get the three to work together. I'll be eternally grateful if anyone can help me with this, I've wasted so many hours.
The issue:
If I proxy myserver.dev hot reloading 404s. Changing the publicPath does nothing. I attach the url to webpack-hot-middleware/client, it fixes the path, but the hmr file ends up having a "GET" error in console with no info. Hot reloading works fine if I keep it HTML and disregard any php/MAMP. I'm overall really confused and I'm probably missing a simple concept.
What I'm trying to get to work together:
- Wordpress for its REST API
- React for views and ui
- MAMP for localhost & MySQL
- BrowserSync for testing across devices
- Webpack for piling and hot reloading
This is the boilerplate I used: https://github./Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader
Theme Directory Structure:
-/inc
-/src
--/ponents
--/containers
--/styles
--app.js
-bundle.js
-functions.php
-index.php
-package.json
-server.js
-style.css
-webpack.config.js
I've tried a million configurations so I gutted the code below for simplicities sake.
webpack.config.js:
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.js:
/**
* 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: [
]
});
package.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"
}
}
Share
Improve this question
asked Dec 20, 2016 at 6:41
user3591425user3591425
2
-
publicPath
specifies the public URL address of the output files when referenced in a browser.__dirname
is wrong here, it should be something likehttp://localhost:3000
. See docs. – dotcs Commented Dec 20, 2016 at 23:04 - 1 did you ever figure this out? – Philip Commented Jan 26, 2017 at 22:24
3 Answers
Reset to default 5Things may have changed with new version of Webpack and BrowserSync for Wordpress by mid-2018 – but I have a very simple, modern Webpack and BrowserSync recipe for Wordpress that has live reload for JS, CSS, and PHP. This uses React, but isn't specific to a React setup, just ES6 module importing/exporting.
Folder structure:
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
Package.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"]
}
Other remendations include Prettier on premit (using Lint-Staged and Husky) for code formatting on all JS projects, appropriate .gitignore
usage where applicable here, and ACF Builder for WP devs.
Well, not exactly a well-crafted answer but I have a very basic Webpack setup in my Gutenberg Boilerplate that will help you get started with ESNext, React, Webpack in WordPress.
Check out the Block #02 and it's configuration.
I wanted to answer this for you with a link: https://css-tricks./bine-webpack-gulp-4/
This article goes through everything needed to solve the problem. Works great for me. It does use gulp, but you could simply strip that out of the config and hack around a bit. The basics of the setup are all there though.
本文标签:
版权声明:本文标题:javascript - How to get Webpack, Wordpress, and BrowserSync to work together? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1740853161a2296408.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论