Questions tagged «webpack-dev-server»

基于Node.js的服务器,支持实时重载,并用于开发基于Webpack的应用程序。

13
如何使webpack开发服务器在端口80和0.0.0.0上运行以使其可公开访问?
我是整个nodejs / reactjs领域的新手,如果我的问题听起来很傻,我深表歉意。所以我在玩reactabular.js。 每当我执行此操作时,npm start它就会一直运行localhost:8080。 我如何更改它0.0.0.0:8080以使其可以公开访问?我一直在尝试阅读上述回购中的源代码,但未能找到执行此设置的文件。 另外,要补充一点- 80如果可能的话,如何使它在端口上运行?

9
在Cloud9.io上的Webpack开发服务器中运行我的React应用程序时,我收到“无效的主机标头”消息
我正在使用Cloud9.io ubuntu VM Online IDE作为环境,并且通过对该错误进行故障诊断而减少了使用Webpack开发服务器运行应用程序的速度。 我用以下命令启动它: webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT $ IP是具有主机地址的变量,$ PORT具有端口号。 我被指示在Cloud 9中部署应用程序时使用这些var,因为它们具有默认的IP和PORT信息。 服务器启动并编译代码,没问题,虽然它没有显示索引文件。只有空白屏幕,“无效的主机头”为文本。 这是请求: GET / HTTP/1.1 Host: store-client-nestroia1.c9users.io Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 DNT: …

6
如果名为jsx的文件,webpack找不到模块
当我这样写webpack.config.js时 module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; 在index.jsx我导入一个react模块App import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( …

2
Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
我开始在使用webpack的node/express环境中开发ReactJS服务器端渲染的应用程序react-router。我对每个Webpack包在开发和生产(运行时)环境中的作用感到非常困惑。 这是我的理解摘要: webpack:是一个软件包,是一种工具,用于将Web应用程序的不同部分结合在一起,然后捆绑成一个.js文件(通常是bundle.js)。然后,结果文件将在产品环境中提供以由应用程序加载,并包含运行代码的所有必需组件。功能包括缩小代码,缩小代码等。 webpack-dev-server:是一个提供服务器以处理网站文件的软件包。它还bundle.js从客户端组件构建单个.js文件(),但将其提供给内存。它还具有选项(-hot)来监视所有构建文件并在代码更改的情况下在内存中构建新的捆绑软件。服务器直接在浏览器中提供服务(例如:)http:/localhost:8080/webpack-dev-server/whatever。内存加载,热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序,非常适合开发环境。 如果我对上面的文字有疑问,我真的不确定下面的内容,因此如有必要请告诉我 当使用一个常见的问题webpack-dev-server有node/express是webpack-dev-server一个服务器,是node/express。这使得该环境很难同时运行客户端和某些节点/表达代码(API等)。注意:这就是我所面临的,但是如果能理解为什么会更详细地了解这一点,将非常高兴... webpack-dev-middleware:这是一种中间件,具有webpack-dev-server(内存捆绑,热重装)相同的功能,但格式可以插入到server/express应用程序中。这样,您就可以webpack-dev-server在节点服务器内部拥有某种服务器()。 糟糕:这是一个疯狂的梦想吗???这一部分如何解决dev和prod方程并使生活更简单 webpack-hot-middleware:这... 卡在这里...在寻找时发现了这件作品webpack-dev-middleware...不知道如何使用它。 ENDNOTE:对不起,有什么错误的想法。我真的需要帮助,以便在复杂的环境中理解这些变体。如果方便,请添加更多可构成整个方案的软件包/数据。

8
Webpack如何构建生产代码以及如何使用它
我是webpack的新手,我发现在生产版本中我们可以减少整体代码的大小。目前,webpack构建大约8MB的文件,而main.js构建大约5MB的文件。如何减少生产构建中的代码大小?我从互联网上找到了一个样本Webpack配置文件,并为我的应用程序进行了配置,然后运行npm run build并开始构建它,并在./dist/目录中生成了一些文件。 这些文件仍然很重(与开发版本相同) 如何使用这些文件?目前,我正在使用webpack-dev-server运行该应用程序。 package.json文件 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors" }, …

4
Webpack-dev-server提供目录列表而不是应用程序页面
我只能在下看到实际的应用/public。 的配置webpack.config.js如下: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

5
使用webpack的多个HTML文件
我正在尝试在某个项目中做某事,但不确定是否可行,我做错了什么或误解了某件事。我们正在使用webpack,其想法是提供多个html文件。 本地主机:8181->提供index.html 本地主机:8181 / example.html->提供example.html 我正在尝试通过遵循文档设置多个入口点来做到这一点: 文件夹结构为: / |- package.json |- webpack.config.js /src |- index.html |- example.html | /js |- main.js |- example.js Webpack.config.js: ... entry: { main: './js/main.js', exampleEntry: './js/example.js' }, output: { path: path.resolve(__dirname, 'build', 'target'), publicPath: '/', filename: '[name].bundle.js', chunkFilename: '[id].bundle_[chunkhash].js', sourceMapFilename: '[file].map' }, ... index.html <!DOCTYPE …

9
Webpack:静音输出
我想知道是否有一个配置选项告诉webpack只将“重要信息”记录到终端。几乎只是错误和警告,并非全部: 有这么多输出!很想压制常见的东西,只让webpack输出警告/错误。想一个解决方案webpack,webpack-dev-server以及karma-webpack。 注意:我尝试过noInfo: true,quiet: true但是似乎并没有解决问题。 编辑:我认为这可能是不可能的,所以我在github上创建了一个问题:https : //github.com/webpack/webpack/issues/1191

11
Webpack-dev-server编译文件,但不刷新或使编译的javascript对浏览器可用
我正在尝试使用webpack-dev-server来编译文件并启动dev Web服务器。 在我中,package.json我的脚本属性设置为: "scripts": { "dev": "webpack-dev-server --hot --inline", } 因此,--hot和--inline应该启用Web服务器和热重载(据我所知)。 在我的webpack.config.js文件中,设置入口,输出和devServer设置,并添加加载程序以查找.vue文件中的更改: module.exports = { entry: './src/index.js', output: { path: __dirname + '/public', publicPath: '/public', filename: 'bundle.js' }, devtool: 'source-map', devServer:{ contentBase: __dirname + '/public' }, module:{ loaders:[ { test: /\.vue$/, loader: 'vue'} ] } }; 因此,使用此设置,我运行npm run dev。webpack-dev-server启动,模块加载程序测试成功(即,当我保存任何.vue文件时,它将导致webpack重新编译),但是: 浏览器永不刷新 …

9
由于Webpack中的CSS,Mocha测试失败
我是Mocha的新手,我正在尝试使用它来测试一个简单的React组件。如果react组件没有任何CSS样式,则测试将通过,但是如果React组件内的标签包含任何className,则会引发语法错误: Testing.react.js import React from 'react'; export default class Testing extends React.Component { render() { return ( <section> <form> <input type="text" /> </form> </section> ); } } testing.jsx import { React, sinon, assert, expect, TestUtils } from '../../test_helper'; import TestingSample from '../../../app/components/Testing.react.js'; describe('TestingSample component', function(){ before('render and locate element', function(){ …

2
热重装不适用于webpack-dev-server和docker
使用已安装docker的Ubuntu Linux。没有虚拟机。 我已经用vuejs应用程序构建了一个docker镜像。要启用热重载,我使用以下命令启动docker容器: docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image 它启动正常,我可以从主机浏览器访问它localhost:8081。但是,当我对源文件进行更改并保存这些更改时,在按F5之前它们不会反映在我的浏览器中(热重装不起作用)。 以下是一些详细信息: package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", build / webpack.dev.conf.js devServer: { clientLogLevel: 'warning', ... hot: true, ... watchOptions: { //poll: config.dev.poll, //aggregateTimeout: 500, // …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.