标签: webpack-dev-server

如何在webpack-dev-server上启用gzip压缩？它默认情况下似乎没有打开.

在我的 React.js 应用程序中，我有一条这样的路线：

/foo/foo.bar/foo

当我加载这个 URL 时（在浏览器上点击刷新），我得到：

Cannot GET /foo/foo.bar/foo

我认为问题在于 Webpack Dev Server 认为此 URL 引用了静态资产并尝试加载它。

我该如何解决这个问题？（我需要点）

假设我有一个像这样结构化的目录:

1. folder A
  1a. some_file.js
  1b. data.json
2. folder B
  2a. folder B1
     2a1. other_file.json
     2a2. data.json
  2b. folder B2
     2b1. data.json
3. output.json

是否有一个webpack加载器可以组合data.json在所有子文件夹中,并将其输出到output.json？

我发现https://www.npmjs.com/package/json-files-merge-loader似乎做了类似的事情,但它似乎要求每条路径data.json,而我需要的东西贯穿所有文件夹和子文件夹data.json.所有data.json键都是唯一的,我想output.json成为一个包含所有键/值对的JSON对象data.json.

我有一个使用webpack-dev-middleware的快速服务器.

如果从cli运行webpack-dev-server,则会出现"progress"选项,导致进度显示在控制台上.这是一个很好的功能,我也喜欢使用中间件.

这是可以实现的还是只适用于独立的开发服务器？

我搜索了文档但找不到与此相关的任何内容.

当我使用Webpack2编译我的文件时.它显示以下警告:

"loaderUtils.parseQuery()收到一个非字符串值,这可能有问题,请参阅https://github.com/webpack/loader-utils/issues/56 "

我检查了github页面,但没有找到如何解决这个问题.这是我的配置:

// webpack 2 configuration
// https://webpack.js.org/guides/migrating/

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    watch: true,
  inline: true,
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, './app'),
    ],
    //http://webpack.github.io/docs/configuration.html#resolve-alias
    alias: {
      lib: path.resolve('./lib'),
      res: path.resolve('./res'),
      style: path.resolve('./style'),
      //make sure it can be load by 'jquery'
      jquery$: 'jquery',
      // 01/26/2017 http://isotope.metafizzy.co/extras.html#webpack
      masonry: 'masonry-layout',
      isotope: 'isotope-layout'
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
  },
  devtool: 'source-map', 
  target: 'web', // enum

    entry: {
    // …

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        hot: true,
        contentBase: path.join(__dirname, 'dist'),
    },
    devtool: "source-map"
}

的package.json

  "scripts": {
    "build": "webpack --progress --colors",
    "dev": "webpack-dev-server -d --watch --progress --colors"
  },

index.js

let h = "hello world"
console.log(h)

我同时运行npm build,npm run dev但似乎都没有生成源映射.我正在检查它们是否显示的方式是我是否可以在Chrome开发工具或Safari开发工具中看到原始来源.

谢谢你的帮助!

更新0

• 确实正在运行npm run build(npm build没有做任何事情)bundle.js.map,我可以在Google Chrome中成功使用源地图(耶!) …

启动webpack-dev-server时，会引发以下警告：

WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
11051:13-17 "export '?cmf' was not found in '@angular/core'

WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
11056:13-17 "export '?mod' was not found in '@angular/core'

WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
11061:13-17 "export '?mpd' was not found in '@angular/core'

由于仅是警告，因此在尝试访问应用程序时仍会生成并提供输出

Uncaught TypeError: jit_val0 is not a function
    at eval (module.ngfactory.js? [sm]:1)
    at evalExpression (compiler.es5.js:26423)
    at jitStatements (compiler.es5.js:26435)
    at JitCompiler._compileModule (compiler.es5.js:26716)
    at compiler.es5.js:26655
    at Object.then (compiler.es5.js:1679)
    at JitCompiler._compileModuleAndComponents (compiler.es5.js:26653)
    at JitCompiler.compileModuleAsync (compiler.es5.js:26582)
    at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4811)
    at PlatformRef_.bootstrapModule (core.es5.js:4797)
(anonymous) @ module.ngfactory.js? [sm]:1
evalExpression @ compiler.es5.js:26423
jitStatements …

根据此处和此处的文档，我的package.json中包含以下内容

"scripts": {
  "start": "webpack-dev-server --host 0.0.0.0 --open",
  ...

只有--open它会打开localhost:8080，当我运行npm start。当我添加时，--host 0.0.0.0它仍然会打开，但是会打开0.0.0.0:8080并ERR_EMPTY_RESPONSE在浏览器中显示我。我可以手动将其更改为localhost:8080，这样就可以正常加载页面。

我试过了--host 0.0.0.0 --open --open-page localhost:8080，它有义务http://0.0.0.0:8080/localhost:8080在浏览器中为我打开。

有人得到了这两个选项，可以很好地一起玩吗？

我有以下webpack配置：

var path = require('path')
var webpack = require('webpack')


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

当我运行命令时，npm run dev它表明main.js已经发出

当我浏览以/scripts/app/bundle/main.js确保足够的文件已加载到浏览器中时

但是当我查看物理路径时，没有文件-似乎仅在内存中

这是我在package.json中拥有的：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },

如何生成物理文件。

我创建了一个新的苗条项目，在Visual Studio代码中打开了新目录，当我npm run dev在终端中运行并打开Web浏览器时，我看到的项目不是我刚才创建的那个项目。

因此，我的最初反应是删除之前的项目，因为它并不重要，然后再次运行该命令，令我惊讶的是，该地址不再存在的项目仍在服务中。我已经重新启动系统，依此类推。

有谁知道为什么会这样？