我在使用react-router和webpack-dev-server时遇到了一些问题,无法实现嵌套的url路由.
webpack.config.js
output: {
path: path.resolve(__dirname, 'build'),
publicPath: "/", <-- this enabled routing to /register/step2
filename: "js/bundle.js",
},
routes.js
const routes = {
childRoutes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/register/step2', component: SecondStep },
]
};
export default (<Router routes={routes} history={createBrowserHistory()} />);
当在appliation中点击时,我可以进入/ register/step2,但是一旦我在浏览器中点击刷新,我的common.js和bundle.js就丢失了:404,因为它试图从/ register /目录加载所有东西.
有人可以帮忙吗？谢谢.
我有一个运行Express的节点服务器的webpack配置.如果正在生产中的条目文件运行Express服务器,如果在开发中也运行Express Server和Webpack Dev Server.问题出在webpack开发服务器初始化时; 它抱怨Unhandled rejection Error: invalid argument或没有找到路径.webpack dev服务器中使用的客户端配置在从CLI自己使用时运行良好,当webpackdevserver在常规(非捆绑)文件中初始化时也可以运行.
与每种方法的不同之处在于,从配置打印的路径在工作的情况和不工作的情况之间是不同的.这些路径是从__dirname解析的,在每种情况下都是不同的.为什么会出现这种情况,是否可以获得正常的__dirname路径？
提前致谢.
服务器配置:
{
target: 'node',
entry: rootDirectory,
externals: nodeModules,//readDirSync('node_modules').filter(x => x !== '.bin'),
output: {
path: join(rootDirectory, 'build'),
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
plugins: [
new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),
'PORT': 8080,
'SERVER': true,
'CLIENT': false
}
})
],
node: {
__dirname: false,
__filename: false
}
};
客户端配置:
{
entry: {
client: [
'webpack-dev-server/client?http://localhost:8080', …我正在导入whatwg-fetch(https://github.com/github/fetch)到我的应用程序中
import fetch from 'whatwg-fetch';
对于我使用的本地开发webpack-dev-server.我收到此错误消息:
test.js?ba55:67 Uncaught TypeError: (0 , _whatwgFetch.fetch) is not a function
它是从这一行开除的:
fetch('/api/mydata', opts)
为什么导入失败？
Webpack本身工作正常,但webpack-dev-server却没有.基本上,webpack为我创建了2个构建文件,一个后端捆绑和一个前端捆绑.所以,我为每个人都有一个webpack-config.js.我想用webpack-dev-server开发我的前端代码,你可以从我的webpack-config文件中看到我的front-end-bundle.js.当我运行web-pack-dev服务器时,它能够找到并构建我的front-end.js和index.html,但是在控制台中没有任何渲染,它给了我一个"Uncaught ReferenceError:require not not defined"
// var nodeExternals = require('webpack-node-externals');
var webpack = require('webpack');
module.exports = {
entry: './browser/entry.js',
output: {
path: './builds',
filename: 'frontend.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"development"'
}
})
],
module: {
loaders: [
{
test: [/\.es6$/, /\.js$/, /\.jsx$/],
exclude: 'node_modules',
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
},
]
},
resolve: { …这是我的webpack配置:
var path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var fs = require('fs'),buildPath='./dist/';
var folder_exists = fs.existsSync(buildPath);
if(folder_exists == true)
{
require('shelljs/global')
rm('-rf', 'dist')
};
module.exports = {
entry: './src/main',
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
publicPath: '/dist/'
},
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true,
},
// "vue-hot-reload-api": "^1.2.2",
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.css$/, loader: …javascript webpack vue.js webpack-dev-server html-webpack-plugin
我搜索过它,找不到任何与此问题相关的内容.
我想要这个的原因是工作流问题.我在chrome canary上设置了一个开发者帐户,并希望将与开发相关的所有内容保存到该浏览器中.
在devServer选项对象中,我可以告诉webpack-dev-server打开"Google Chrome Canary".我使用Mac,如果这有所作为.
当我在编译时运行 webpack-dev-server 时遇到问题而不是控制台错误，但当我转到http://localhost:8080/时在浏览器中抛出下一个错误：
未捕获的类型错误：util.inherits 不是函数。
这很奇怪，因为在没有 webpack-dev-server 的情况下，它可以很好地与 webpack 配合使用。当我调试错误时，错误位于文件 webpack:///./~/websocket-driver/lib/websocket/streams.js?875d 中，错误是此段：
var Stream = require('stream').Stream,
util = require('util');
var IO = function(driver) {
this.readable = this.writable = true;
this._paused = false;
this._driver = driver;
};
util.inherits(IO, Stream); // this line
webpack.config.js
[ { devtool: 'eval-source-map',
resolve: { extensions: [Object], modules: [Object], alias: [Object] },
module: { rules: [ { test: /\.css$/, use: [Object] },
{ test: /\.scss/, use: [Object] },
{ test: /\.json/, use: [Object] },
{ …我第一次尝试使用webpack而且我收到此错误,
Error: EACCES: permission denied, mkdir '/dist'
at Error (native)
在尝试运行我的生产脚本时.
A sudo chown -R 'whoami' /dist回来了chown: /dist: No such file or directory.
我该如何解决这个问题？
我正在通过热模块重新加载 - 开发服务器获得CORS问题.我在端口上使用dev-server 3000但是应用程序是从另一个端口提供的http://localhost:52024/.
这是我得到的错误(Chrome,Windows 10):
GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!
实际上我遇到两个错误:第一个是由//路径中的双斜线引起的,另一个是与CORS相关的错误.这是我的webpack.config.js:
const webpack = require('webpack'),
path = require('path');
module.exports = {
entry: …javascript cors webpack webpack-dev-server hot-module-replacement
在React上遇到一点麻烦.有谁知道如何安装webpack@^4.xx的同行？
这是我尝试运行时收到的错误
webpack-dev-server
在cmd.它只是回来了
webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.