dev-server，我的 webpack 将构建包含 jquery 的包。
我使用 html-webpack-plugin，下面的代码行将在构建产品时将我的包注入到正文中。
new HtmlWebPackPlugin({
template: './src/index.html'
}),
我的问题是，在我的index.html中，我有semantic-ui.js，它依赖于Jquery，
<body>
<my-app>loading...thaison</my-app>
<script src="./asset/semantic-ui/dist/semantic.min.js"></script>
</body>
因此，当我触发我的开发环境或产品构建时，捆绑包出现在语义之后，因此我有一个错误。如何使开发注入发生在我的手动脚本源之前？
开发服务器服务：
webpack-dev-server --inline --progress --port 4000 --content-base src
例如我的webpack.config.js：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'/api': ''}
}
}
},
....
}
这里，我曾经/api匹配一个url规则。但我研究了哪个是的http-proxy-middleware基础，它说我们可以使用 a来做：webpack-dev-serverproxyfilter functioncustom match
var filter = function (pathname, req) {
return (pathname.match('^/api') && req.method === 'GET');
};
var apiProxy = proxy(filter, {target: 'http://www.example.org'})
但是webpack.config.js，我怎么能用 afilter function来做我的custom match呢？谢谢。
我正在开发一个多租户系统，我使用的是 Angular CLI 1.0.0 因此，当我转到 localhost 或 asd.localhost(*.localhost) regex 时，它会正常为应用程序提供服务。最后我升级到1.0.1。当我访问 asd.localhost 时，它显示Invalid Host Headers。他们说 webpack 已经添加了一些安全补丁。我如何允许子域用于角度应用程序以实现开发目的。
我正在用 webpack4 测试 react-router4，但我无法获得 webpack-dev-server 的设置：
{historyApiFallback: true}
上班。这个用法在 webpack3 中工作得很好，所以我不确定是什么问题......这是我的 webpack.config.js：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = () => {
return {
mode: 'development',
devtool: 'source-map',
devServer: {
port: 8888,
historyApiFallback: true,
stats: 'minimal'
},
resolve: {
extensions: ['*', '.mjs', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.m?jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title:'React Lab',
template: 'src/index.html'
})
]
}
}
这是我使用 react-router4 的简单反应应用程序：
import React from 'react'; …我正在用 Vue 构建一个应用程序。我需要https在本地环境中进行开发和测试。我按照本教程成功创建了必要的证书。为了让开发服务器使用它们，我将server.key和server.crt文件复制到我的项目的根目录中，并将文件保留rootCA.pem在~/.ssh. 我在/etc/hosts别名 localhost 中为我的域添加了一个条目，例如：
127.0.0.1 example.test
然后我vue.config.js在我的项目的根目录中编辑，看起来像：
127.0.0.1 example.test
这在本地效果很好。我的问题出在我的临时服务器上。
我的登台服务器正在运行 ubuntu (16.04) 并使用certbot(LetsEncrypt)安装了实际的 SSL 证书（即非自签名）。我的项目是一个静态前端，因此我将其nginx配置为指向/dist目录并使项目在staging.example.com. 在我devServer在vue.config.js上面添加配置之前，这一切正常。
当我构建用于登台的项目时，即
npm run build -- --mode staging
我希望它忽略devServer配置部分，因为NODE_ENV === 'production'（在我的.env.staging文件中设置）。
构建过程失败，抱怨：
Error loading vue.config.js:
Error: ENOENT: no such file …我正在使用 webpack 开发服务器来构建单页应用程序。有很多路由，比如/api, /alpha, /bravo... /zulu，它们都需要被代理。
我编写了 webpack.config.js 文件来代理所有 URL。
proxy: {
"/api": "http://localhost:3000",
"/alpha": {
target: "http://localhost:8080",
pathRewrite: { "^/alpha": "" }
},
"/bravo": {
target: "http://localhost:8080",
pathRewrite: { "^/bravo": "" }
},
"/charlie": {
target: "http://localhost:8080",
pathRewrite: { "^/charlie": "" }
},
...
"/zulu": {
target: "http://localhost:8080",
pathRewrite: { "^/zulu": "" }
},
}
它运行良好，但我不得不编写太多代码。请问有什么办法可以减少吗？我以为 webpack 支持这个问题的正则表达式，但我无法从官方文档中得到解决方案:(
我有这个问题，我用 github.com/facebook/create-react-app 解决了这个问题：https : //github.com/facebook/create-react-app/issues/8527
基本上我用我自己的服务器代理 webpack-dev-server。HTTP 请求没问题，但 Websocket 请求将失败并显示以下错误：
Run Code Online (Sandbox Code Playgroud)WebSocket connection to 'ws://localhost:3016/sockjs-node' failed
因为有一个 Websocket 服务器侦听 3015 而不是 3016。
所以我可能希望代理一个 websocket 请求。我可以像这样代理一个 HTTP 请求：
app.use((req,res,next) => {
// proxy to dev server
console.log('path:', req.path);
console.log('url:', req.url);
const r = http.request({
method: req.method,
path: req.path,
host: 'localhost',
protocol: 'http:',
port: 3015 // webpack-dev-server is listening on 3015
}, r => {
r.pipe(res);
});
r.once('error', next);
req.pipe(r);
});
app.listen(3016); // app listens on 3016 and forwards some requests to …几天前，我重新安装了 Windows 10。我正在开发以 express 作为后端和 React.js 作为前端的全栈 Web 应用程序。我正在使用 nodemon 为前端重新分配服务器和 webpack-dev-server。值得一提的是，我使用的是 WSL2。我注意到 nodemon 在保存文件时没有反应。我不得不手动输入rs重新加载。一开始以为是nodemon的问题。在这里寻找类似的问题，但我发现的只是--watch，这没有帮助。并不是说我尝试过 webpack 并且问题仍然存在我一无所知。这是一些有用的信息：
webpack 命令:
webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js --mode development。
webpack.config.js :
module.exports = {
entry: ["babel-polyfill", "./app/index.jsx"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
test: /\.(jpg|png|svg)$/,
loader: "file-loader",
options: {
name: "[path][name].[hash].[ext]",
},
},
],
},
resolve: {
alias: {
components: __dirname + "/app/components", …nodemon webpack webpack-dev-server windows-subsystem-for-linux hot-reload
（我正在尝试按照本教程进行操作）
当我运行时npm start，出现以下错误：
PS C:\Users\user\Desktop\Projects\Websites\project\project> npm start
> PROJECT@0.0.0 start C:\Users\user\Desktop\Projects\Websites\project\project
> webpack-dev-server --config webpack.config.js --open
'find_dp0' is not recognized as an internal or external command,
operable program or batch file.
internal/modules/cjs/loader.js:775
throw err;
^
Error: Cannot find module 'C:\webpack-dev-server\bin\webpack-dev-server.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
at Function.Module._load (internal/modules/cjs/loader.js:677:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
我认为主要问题是它正在webpack-dev-server我的C:/驱动器中寻找模块，因为错误是这样说的：
Error: Cannot find module 'C:\webpack-dev-server\bin\webpack-dev-server.js'
为什么它会在那里寻找模块而不是在本地node_modules文件夹中？这至少是我认为导致问题的原因，也许是其他原因？
我在其他任何地方都找不到在线相同的错误（它在用户C:/驱动器中查找的位置）。我在 Visual Studio Community …
我正在接管一个其他人停止维护的小型反应工具项目。但是，我无法让它运行。这是 webpack 配置的一个问题，我试图以尽可能小的大小重建它，但我无法让它运行。
这是当前的文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './client/index.js',
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js'
},
module: {
rules:[{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}],
},
resolve: { extensions: ['*', '.js', '.jsx'],
alias: { 'react-dom': '@hot-loader/react-dom' } },
}
这是我得到的错误：
Error: Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property …
webpack ×9
node.js ×3
angular ×2
proxy ×2
angular-cli ×1
hot-reload ×1
nodemon ×1
npm ×1
react-router ×1
vue-cli ×1
vue.js ×1
websocket ×1