这是我的路由结构:
在使用Express服务器并从CLI构建bundle.js时,一切正常,但为了加快开发,我现在想要使用Webpack dev服务器,现在需要以一种方式配置事物.考虑已设置的Passport授权.
这是我的Webpack配置:
module.exports = {
entry: [
'./client/src/index.js'
],
output: {
path: __dirname + '/server/public',
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './client'//,
// proxy: {
// '/api/*': {
// target: 'http://localhost:3000',
// secure: false …我使用webpack并使用html-webpack-plugin生成的脚本包更新我的index.html文件,例如bundle.[hash].js.
然后我必须运行webpack-dev-server所以我可以将该包加载到内存中并利用热模块替换.
这使代码编译两次.
但是,我想要的是webpack-dev-server能够使用new更新index.html文件bundle.[hash].js,因为现在我必须运行webpack后跟webpack-dev-sever.编译两次似乎很奇怪.
同样,我运行的唯一原因webpack是使用bundle的新哈希更新我的index.html文件.如果我可以webpack-dev-server将更新的index.html输出到磁盘,那么我可以webpack完全放弃命令.
这可能吗？如果是这样,webpack配置会改变什么？我的webpack配置很长,所以我认为在这里发布它会有所帮助.
webpack webpack-dev-server webpack-hmr html-webpack-plugin webpack-hot-middleware
我有一个可能很大的Angular 2应用程序,我们将它分成多个部分(它可以被视为WebPack术语中的bundle).此外,我们将分别构建和部署它们.因此,可以从主应用程序动态加载应用程序的不同部分(不在同一Web应用程序中 - 可以在不同物理主机上的多个运行服务中).
Webpack捆绑速度非常快且很好.但正如我从输出中所知,它使用复杂的内部格式(使用映射到实际路径/名称的模块编号).此外,代码拆分是通过将模块ID映射到块名称来完成的,然后可以动态加载块名称.
我看到webpack的问题:
所以任何想法是否可以使用webpack1/2或者我应该看看像jspm,System.js,browserify等工具？我喜欢webpack如何处理ts作业(配置灵活,它工作得很快,它可以捆绑很多东西),但这些问题使这些用例有些复杂化.
提前致谢.
我已经使用webpack已有一段时间了，但这是我第一次没有为此修改入门套件，而是尝试从头开始进行所有设置。
我跟随着Surviv.js.com上的这篇不错的文章，并继承了那里描述的一些方法，将它们与我的一些早期设置结合在一起（例如根据发送的生产变量设置不同的名称和路径）。
在讲座期间，我尝试尽可能多地运行“构建”和“开始”，以免被无法跟踪的意外行为所困扰。这很好。
然后在某个时候摆弄有关从第三方框架中排除未使用的CSS 的章节时，我以某种方式破坏了开发服务器的设置。（"run build"仍然有效！）
我的热服务器定义为192.168.1.2:3000（这正是我想要的方式）。当我webpack-dev-server使用下面进一步显示的设置运行时，在该位置显示404（无法获取/）。现在，我已经读了很多有关如何正确设置webpack开发服务器的信息，但是由于我仍然不完全了解如何正确设置Webpack开发服务器，所以我仍然做得不好...（很可能不是这里一个人...）。路径有效。
（如果我在这方面有误，请帮助我）
webpack.config.js只会在运行开发服务器时在内存中提供，因此在物理上是不可见的（path: path.join(__dirname, 'devServerFolder'例如，如果输出是我创建的文件夹，那么如果在我的项目结构中找不到该文件夹，我将永远看不到该文件夹） ）index.html指向我bundle.js将一个文件夹中需要的地方我指向与publicPath以及与contentBase（这可能是我的devServerFolder，我就需要创建与index.html它;通常在网络上大部份的设定同样public使用的文件夹来保存生产建立）html-webpack-plugin该插件，它将自动为我生成该文件，而无需指向任何内容，因为bundle.js被插件写入了该文件这些是真正使我难以理解的要点。我已经尝试了很多。的。不同。结合使用publicPath和contentBase设置时，运气不佳，无法重新建立我的开发服务器（工作正常）。
请注意，我在代码或使用编译我的版本时没有任何问题run build，它们可以正常运行并且应该正常运行。
webpack.test
|
| - app // App folder
|
| …configuration webpack webpack-dev-server html-webpack-plugin hot-module-replacement
我有一个Electron / Webpack项目，试图在文件更改时添加自动刷新。根据文档，我已采取以下步骤：
webpack-dev-server到我的项目。我添加了以下内容webpack.config.js：
devServer: {
inline: true
}
我用以下命令运行webpack webpack-dev-server --progress --colors
当我对条目文件进行更改时，它们不会反映在http://localhost:8080/build/index.js（将输出设置为的位置）发出的代码中。我想念什么？
为了完整起见，这是我的webpack配置：
module.exports = {
entry: './src/index.tsx',
output: {
filename: './build/index.js'
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.tsx', '.jsx']
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
]
},
devServer: {
inline: true
}
}
我刚刚更新到Webpack 2并exports is not defined在浏览器中收到运行时错误.我改变了我的.babelrc:
{
"plugins": [
"syntax-flow",
"transform-flow-strip-types",
"add-module-exports"
],
"presets": [
"latest",
"stage-2"
]
}
对此:
{
"plugins": [
"syntax-flow",
"transform-flow-strip-types",
"add-module-exports"
],
"presets": [
["latest", {
"es2015": {
"modules": false
}
}],
"stage-2"
]
}
停用模块导入/导出转换并利用webpack 2的树形抖动功能.我错过了什么吗？构建编译正确,但在浏览器中它只是爆炸.
我只是无法启动此服务器,我阅读了webpack-dev-server文档.
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
示例代码看起来很简单,但我无法成功启动此服务器,无论我尝试了什么,不同的文件夹,它只是无法获取内容 !!!我错过了什么？
任何帮助都会非常感激.
输出:
Project is running at http://0.0.0.0:8080/
webpack output is served from /assets/
Content not from webpack is served from ~/WebstormProjects/react_back/assets/
我的项目结构:
??? [drwxr-xr-x ] src
? ??? [-rw-r--r-- ] index.js
??? [drwxr-xr-x ] public
? ??? [-rw-r--r-- ] index.html
? ??? [drwxr-xr-x ] assets
? ? ??? [-rw-r--r-- ] bundle.js
? ??? [-rw-r--r-- ] favicon.ico
??? [-rw-r--r-- ] package.json
??? [-rw-r--r-- ] npm-debug.log …我正在使用react,react-router(v4),redux和webpack(-dev-server)来构建应用程序.Devserver和eveything工作正常,包括HMR和historyApiFallback.也就是说,当我进入http://localhost:8080/how我得到index.html,bundle.js(我的应用程序),和右构件How被渲染.
我的基本路由如下:
//App.js
<Router>
<Wrapper>
<Route path='/' component={MainNav} />
<Route exact path='/' component={Splash} />
<Route path='/how' component={How} />
<Route path='/auth' component={Auth} />
<Route path='/' component={Footer} />
</Wrapper>
但是,在声明子路线时,例如Auth:
<Wrapper orange>
Login Page
<Link to={loginUrl}>Login</Link>
<Switch>
<Route exact path='/auth/login' component={Login} />
<Route path='/register' component={Register} />
</Switch>
</Wrapper>
进入时我从react-router获得404 http://localhost:8080/auth/login.当导航到http://localhost:8080/auth/loginApp内时,例如在链接点击时,Login正在渲染组件.
我知道StackOverflow上有很多类似的问题,但奇怪的是顶级路由正在呈现而没有问题,这只发生在嵌套路由上.此外,它可能不是webpack-dev-server(historyApiFallback或publicPath)的问题,因为我还可以将应用程序捆绑生产并与节点服务器一起提供,结果相同.
另外,我没有看到react-router文档中的基本示例有所不同.
仅供参考,这是我的webpack配置:
module.exports = {
context: …使用webpack我将源文件与分发文件分开.
我遇到的一个问题涉及到output.publicPath,如果我定义一个,生成的index.html有错误的CSS和JS资源路径.我认为问题与extract-text-webpack-pluginSee:https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246有关
现在我已将代码分离为源代码和分发代码,我index.html可以在http://localhost/target/classes/war.并且每个页面刷新都需要手动输入URL,因为路由无法识别文件夹名称.<base />头部的标签似乎没有效果.
我怎么能指示的WebPack显示文件夹中的内容./target/classes/war在http://localhost/？(不使用output.publicPath)
为了完整性,请在下面查找整个webpack.config.js内容:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var GoogleFontsPlugin = require("google-fonts-webpack-plugin");
module.exports = {
entry: {
polyfills: './src/main/webapp/polyfills.ts',
vendor: './src/main/webapp/vendor.ts',
app: './src/main/webapp/app/core/global/main/main.ts'
},
output: {
filename: 'target/classes/war/script/[name].[hash].bundle.js'
},
resolve: {
extensions: ['.ts', '.js'],
alias: {
css: path.resolve(__dirname, "src/main/webapp/WEB-INF/scss"),
src: path.resolve(__dirname, "src/main/webapp"),
dist: path.resolve(__dirname, "target/class/war") …我正在使用@ vue / cli 3.x，在我的vue.config.js中，我有以下内容：
devServer: {
proxy: {
"/api": {
ws: true,
changeOrigin: true,
target: "http://localhost:8080"
}
}
}
但是我不断收到CORS错误：
通过CORS策略已阻止从原始地址“ http：// localhost：3000 ” 访问“ http：// localhost：8080 / api ” 处的XMLHttpRequest ：请求的资源上不存在“ Access-Control-Allow-Origin”标头。
任何的想法？
webpack ×10
reactjs ×2
babel ×1
electron ×1
javascript ×1
passport.js ×1
react-router ×1
vue-cli-3 ×1
vue.js ×1
webpack-hmr ×1