标签: webpack-dev-server

我正在设置一个基本的 Webpack 安装，并希望使用PostCSS和PreCSS插件在 @imported 文件中自动重新加载浏览器预处理的 CSS 。目前，如果我修改并保存 @imported 文件，浏览器不会刷新（下面示例中的 body.css）。如果我随后保存根引用的 CSS 文件 (styles.css)，则浏览器会刷新并反映对 @imported 文件所做的任何更改。

我尝试使用可配置的 webpack-dev-server，并使用 server.js。我试过没有和安装热模型重新加载（HMR）。

有没有办法让 webpack 监视 @imported CSS 文件，或者我在这里根本错过了什么？

包.json

"dependencies": {
  "react": "^0.14.0",
  "react-dom": "^0.14.0"
},
"devDependencies": {
  "autoprefixer": "^6.3.1",
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "postcss-loader": "^0.8.0",
  "postcss-scss": "^0.1.3",
  "precss": "^1.4.0",
  "react-hot-loader": "^1.3.0",
  "style-loader": "^0.13.0",
  "webpack": "^1.12.13",
  "webpack-dev-server": "^1.14.1"
},
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js",
  "start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 …

我webpack-dev-server在一个非常简单的设置中使用.我发现,即使服务器会自动触发一个浏览器重装当index.js文件发生更改,它并不会触发重新加载时index.html的变化.我怎样才能做到这一点？

这是我的设置:

的package.json

{
  "name": "html-reload",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
        "build": "node_modules/webpack/bin/webpack.js",
        "start": "webpack-dev-server --host 0.0.0.0 --port 8383 --content-base dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'dist',
        filename: 'bundle.js'
    }
};

我启动了webpack-dev-serverwith:npm run start并将浏览器指向:

http://localhost:8383/webpack-dev-server/index.html

我所做的每一项更改都会src/index.js在浏览器中自动刷新,但我所做的更改并非如此dist/index.html.

我正在开发一个在本地使用大型 3d 资产的 Javascript 游戏。我需要那些带有 webpack 的资源，比如：

require('../../assets/models/house.obj')

正如你所看到的，做这样的事情给了我一个很大的初始包和很长的初始构建时间：

[0]           main-ad421c4138968fe0a8ae.js    14.8 MB       0  [emitted]  main
[0] webpack built ad421c4138968fe0a8ae in 26610ms

我对大的构建时间没意见，但真正的问题是使用开发服务器的重建时间。

[1] [piping] File src/Game.js has changed, reloading.
[0] webpack built 80f5c6c75e347304002c in 10534ms

重建包需要 10-20 秒，到达浏览器需要更长的时间。如果可能的话，我想减少这个时间。

我试过完全忽略我的资产文件夹：

new webpack.IgnorePlugin( /assets\/*/ ),

但是正如你可能猜到的，这意味着我不能再require()通过它的 loacl 路径成为资产，这基本上是使用 webpack 的全部意义所在。

我还尝试使用webpack watch ignore 插件忽略我的资产文件夹和节点模块：

new WatchIgnorePlugin([
    path.resolve( __dirname, '../assets/models/' ),
    path.resolve( __dirname, '../node_modules/' )
]),

然而，这也不会减少构建时间。我提交了一个错误，因为看起来插件实际上根本没有做任何事情。

我有一个后端服务器（由 Rails 提供支持），其 API 由在 Node 简单开发服务器上运行的 HTML5 前端使用。

两者都在同一台主机上：我的机器。

当我从前端登录到后端时，rails 向我发送了会话 cookie。我可以在响应头中看到它，问题是浏览器不保存它。

政策是正确的，如果我直接从 Rails 应用程序提供相同的前端，cookie 设置正确。

我能看到的唯一区别是，当前端在 Node 服务器上运行时，它在端口上运行，8080而 rails 在端口上运行3000。我知道 cookie 不应该是特定于端口的，所以我错过了这里发生的事情。

有什么想法吗？解决方案？

（我需要能够以这种方式保持设置，以便让前端从 Node 提供服务，后端在不同端口的导轨上提供服务）

我正在我创建的docker容器中运行基础Vue.js Webpack模板(https://github.com/vuejs-templates/webpack/)的webpack/webpack-dev-server部分.容器还包含vue CLI以创建新项目(如果需要,可以在此处获取我的容器:https://hub.docker.com/r/ncevl/webpack-vue/).

从webpack-simple模板移动到此模板后,热重新加载不起作用.

一切都在使用Webpack-Simple模板,您可以在这里克隆/查看:https://github.com/vuejs-templates/webpack-simple

我可以使用以下webpack-development-server启动命令运行简单模板(使用热重载按预期工作):

webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll

也就是说,webpack模板的完整(非简单)版本似乎没有使用webpack-dev-server启动命令,而是使用build/dev-server.js(https:// github)中引用的其他中间件. com/vuejs-templates/webpack/blob/master/template/build/dev-server.js)和webpack dev config.

由于--watch-poll是让WDS热重载功能在上一个项目中的docker容器中工作的关键,我的想法是我需要做一些与webpack-hot-middleware类似的东西,但我看不到他们的文档中的任何内容(在这里:https://github.com/glenjamin/webpack-hot-middleware)都谈到了改为基于轮询的方法.

我不是100%肯定轮询标志会起作用,因为我可以看到容器在我做出更改时重新编译我的源代码.如果我手动刷新,我也可以在浏览器中看到更改.

如果我在chrome dev工具中检查浏览器中的页面,然后转到network/XHR我可以看到浏览器确实从webpack-dev-server接收信息,但在视觉上它不会更新.

给出上面的假设我认为websockets(或者我认为使用的socket.io)正在浏览器和WDS之间进行通信,所以这可能是某种浏览器缓存问题？

我检查了我的控制台,发现这看起来像一个标题问题:

作为参考,该图像的文本错误(为了让任何有相同问题的人更容易找到这篇文章)是:

EventSource无法加载http:// __ webpack_hmr /.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http://0.0.0.0:8080 '访问.

使用webpack-simple Vue.js模板时,Hot-Reload/Hot Module Reload再次使用这个相同的容器设置.

我想知道是否有人遇到类似的事情,或者对如何添加轮询选项有任何想法.我想我的替代方案是回滚到更基本的webpack配置并重建那部分东西以使用传统的webpack-dev-server/webpack配置但是给出上述我不确定是否会解决它.

这似乎是一个业余问题，但我无法使用 Webpack 创建其他页面

这是我的 webpack.config.js 文件

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require('webpack')
var path = require('path')

var isProd = process.env.NODE_ENV === 'production' // true or false
var cssDev = ['style-loader', 'css-loader', 'sass-loader']
var cssProd = ExtractTextPlugin.extract({
  fallback: 'style-loader',
  loader: ['css-loader', 'sass-loader'],
  publicPath: '/dist'
})
var cssConfig = isProd ? cssProd : cssDev

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: { …

我有webpack.config.js文件，并为单个模块块中的每种字体类型添加了加载程序，但是当我运行时yarn start

webback 在终端中成功遵守了此详细信息

  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB          [emitted]         
448c34a56d699c29117adc64c43affeb.woff2      18 kB          [emitted]         
 fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB          [emitted]         
  e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB          [emitted]         
  89889688147bd7575d6327160d64e760.svg     109 kB          [emitted]         
                             bundle.js    1.56 MB       0  [emitted]  [big]  main
                           favicon.ico    1.15 kB          [emitted]         
                            index.html  605 bytes          [emitted]  

并在浏览器中打开页面，并在其上应用了 bootstrap css 但是在控制台中，它为woff woff2和ttf文件提供了多个错误（参见图片）

模块解析失败：意外字符 '' (1:4)
您可能需要适当的加载程序来处理此文件类型。
（此二进制文件省略了源代码）

包.json

"dependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "history": "^4.7.2",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "path": "^0.12.7",
    "postcss-loader": "^2.0.8",
    "react": …

我正在处理一个弹出的Create React App项目，并查看webpack开发服务器上的文档，它们看起来有点裸露：https ://webpack.js.org/configuration/dev-server/#devserver-before

但我试图查看是否可以执行以下操作：

before(app){
  // read cookie for user session
  // send user ID in cookie to external API
  // retrieve user object from API
  // attach user object to response, to be _somehow_ accessed via the React app client side
}

我知道这是伪代码，但我什么很不清楚究竟你可以在这个中间件中做，在挂钩到创建作出反应的index.html和上述客户端的应用程序的渲染方面反应应用

在文档中，它说您可以定义一个路由处理程序，如下所示：

app.get('/some/path', function(req, res) { }

但是我觉得那将不会有用，因为那样一来您将无法回到Webpack开发服务器的渲染过程中来？

我有使用 ejs 文件的项目。唯一的问题是我在服务器端使用 ejs 文件。代码如下。我需要以某种方式设置 webpack，它会即时插入 index.ejs<script src="frontend/build/..."></script>和<style src="frontend/build/..."/>. 我只知道我应该以某种方式使用 webpack-middleware。如果有人有经验，请帮我设置。

// webpack.config.js

import path from 'path';

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';

const inProduction = process.argv[process.argv.length - 1]
  .match(/[a-z]+$/g)[0] === 'production';

const basic = {
  entry: {
    app: path.join(__dirname, 'frontend/source/scripts/main.js'),
  },
  output: {
    path: path.join(__dirname, 'frontend/build'),
    filename: '[name].[chunkhash].js',
  },
};

const module = {
  rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: ['css-loader'],
      }),
    },
    {
      test: /\.js$/,
      use: ['babel-loader'],
      exclude: ['/node_modules'],
    },
  ], …

在webpack.config.js，在output.filename我看到方括号。这意味着什么？使用它和纯文本有什么区别？

output: {
    filename: '[name].js',

    // Webpack dev middleware, if enabled, handles requests for this URL prefix
    publicPath: 'dist/'
},