标签: webpack-dev-server

我们正在进行大量的反应和热模块更换,很高兴与您合作.但是,当有人访问/或任何其他URL时,如何在默认情况下启动HotModuleReplacement？

我想在开发过程中更改行为并"删除""/ webpack-dev-server /".对于部署,我们有一个没有热模块的webpack.config但是有什么理由要有额外的"/ webpack-dev-server /"url？

原因并不像我原来的问题那么重要:你如何改变这种行为？

我想构建多个HTML文件，每个文件都有一个单独的入口点。似乎webpack-dev-server只提供一个HTML文件。

我有这样的webpack.config.js.

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./source/application/main.ts",
  output: {
    path: "./distribution",
    filename: "app.bundle.js"
  },
  module: { loaders: [{ test: /\.ts$/, loader: "ts-loader" }] },
  plugins: [new HtmlWebpackPlugin({ template: "./source/index.html" })],
  resolve: ["", ".js", ".ts"]
}

它正确地找到并解释文件main.ts,除非引导模块(下面的第三行),它说文件无法解析.这是我的main.ts文件.

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);

它无法解决的文件存在.如果我更改其名称或将其删除,我的IDE会告知它已丢失.但是,出于某种原因,当引导进程时,计算机无法找到它.

./application/main.ts中的错误找不到
模块:错误:无法解析C中的'file'或'directory'./app.module:...\main
@ ./application/main.ts 3:19-42 webpack:bundle现在是VALID.

在内容app.module.ts和main.ts被带到从Angular.IO页.

我看到一些帖子说这是因为config.json无效和/或可能在Windows中的路径上有些混乱.但是,我已经验证该文件是有效的,我已经尝试添加context:require("path").resolve(__dirname, "app"),到我的Webpack配置中.它只导致找不到以前的文件app.ts,所以我忽略了这种方法. …

这篇文章的主要目标是在编写Webpack插件时获得有关错误/警告管理的额外信息.

我在Webpack插件文档中看到,可以将err参数传递给基于时序的插件接口(在回调中),但没有进一步解释它如何影响Webpack生命周期,它的构建过程以及如何使用它.它没有解释是否有办法管理其他类型的插件接口的错误.

无论如何,作为第一次尝试,在'emit'生命周期步骤中,我试图传递给err参数a new Error('An error has occurred')或只是一个'An error has occured'值,但在任何一种情况下它确实在控制台中显示给定的err参数(IE很遗憾没有任何参数)特定于错误的颜色),并且webpack-sev-server卡住了:

  function WpAggregationPlugin() {
    this.startTime = Date.now();
    this.prevTimestamps = {};
  }

  WpAggregationPlugin.prototype.apply = function(compiler) {
    compiler.plugin( 'emit', (compilation, callback) => {

      var changedFiles = Object.keys(compilation.fileTimestamps).filter( watchfile => 
        this.prevTimestamps[watchfile] &&
        (this.prevTimestamps[watchfile] < (compilation.fileTimestamps[watchfile] || Infinity)) )

      // compilation.errors.push(new Error('...'))

      this.prevTimestamps = compilation.fileTimestamps;

      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` ) …

webpack-dev-server正在成功捆绑html,scss和js文件,并且输出也被提供,localhost:8080但dist文件夹没有在本地创建.以下是我的webpack配置:

var extractPlugin = new ExtractTextPlugin({
   filename: 'main.css'
});

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    devtool: 'inline-source-map',
    devServer: {
      port: 3000
    },
    plugins: [
        extractPlugin,
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new CleanWebpackPlugin(['dist'])
    ]
};

我试图在项目上运行npm install,它无法解析webpack包.我已经关注了谷歌和这里发现的大多数其他问题答案.

我已经完全清理了nodejs + npm文件的计算机,再次通过以下答案: 如何从Windows Unmet Peer Dependency angular 2.3.0 rxjs zone.js中完全删除node.js.

我试图在全局范围内手动安装未满足的依赖项,并使用npm install --save将其持久保存到package.json.安装它要求的特定版本,然后安装最新版本.

我遇到的错误是:UNMET PEER DEPENDENCY webpack@3.6.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 
(node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.1.2: wanted {"os":"darwin","arch":"a
ny"} (current: {"os":"win32","arch":"x64"})
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || 
^2.1.0-beta || ^1.12.6 but none was install
ed.
PS C:\Users\david.maceachern\Projects\ia_beta\impacttool\src\ui> npm install 
--save webpack
angular-phonecat@0.0.0 
C:\Users\david.maceachern\Projects\ia_beta\impacttool\src\ui
`-- UNMET PEER DEPENDENCY webpack@3.6.0

npm WARN optional …

我一直在努力让我的源地图在我的应用程序中运行很长一段时间.我已经设定

devtool:  'source-map',

在webpack配置中,但它们在Chrome devtools中仍然不可用.

我使用我的FE Stack推了一个非常简单的应用程序希望有人可以识别问题,无论是webpack,angular还是其他库.https://github.com/coreysnyder/Angular-Webpack3-Seed

以下是我正在运行的版本:

{ 
  CoreyApp: '1.0.0',
  npm: '4.4.4',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '57.1',
  modules: '48',
  node: '6.9.0',
  openssl: '1.0.2j',
  uv: '1.9.1',
  v8: '5.1.281.84',
  zlib: '1.2.8' 
}
OSX 10.12.6

我一直在尝试借助webpack 4在django中设置一个react组件。

为了让我起步，我仔细阅读了以下内容：

结合使用Webpack和Django +热重载React组件作为奖励

教程：带有React的Django REST（Django 2.0和一些测试）

这两个演练都非常好。最后，即使我确实使用了django 1.11，也可以通过跟随第二个链接来使它正常工作。

我跟随第二个链接后遇到的问题是，使用webpack-dev-server时，热重装不起作用。问题在于，虽然可以读取main.js，但django无法读取webpack-dev-server的输出文件（给出404错误）。我读过dev-server文件默认情况下仅存在于内存中。

为了克服热重载文件上出现错误404的问题，请安装软件包write-file-webpack-plugin以将每次重载写出。然后将webpack-config.js更改为（我删除了几行以使其更短...。）：

var path = require('path');
//webpack is not needed since I removed it from plugins
//const webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var WriteFilePlugin =require('write-file-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
    ]
  },
  entry: [
          './frontend/src/index',
          ],
  output: {
    path: path.join(__dirname, 'frontend/static/frontend'),
    // Changing the name from "[name]-[hash].js" to not get 1000 files in …

使用vue-cli 3，我有了一个vue应用，它在开发模式下旋转。我打电话给npm run serve，我看到...

DONE  Compiled successfully in 431ms                                                                                                                                                                   
16:26:43
App running at:
- Local:   http://localhost:8080/mobileapp/v/
- Network: http://172.18.55.202:8080/mobileapp/v/

（路径/mobileapp/v/来自baseUrl配置变量。域notilusdev.dimosoftware.com/mobileapp指向iis中的vdir，并且对/ mobileapp / v /的请求被反向代理到webpack-dev-server）

在浏览器中，该应用程序正常启动。然后，它开始向发出请求https://172.18.55.202:8080/sockjs-node/info?t=1529072806971。这些请求失败，因为该端口上没有SSL。我什至不希望ip作为网站的公共地址。Webpack（或sockjs）如何构造此URL？当它只是给我一个直接的http链接时，为什么认为此端口上有ssl？如果将协议基于地址栏协议，为什么它忽略地址栏主机名。如何配置才能使这些请求成功？

我已将更新更新webpack-dev-server到最新3.1.14但我在使用时仍然遇到漏洞问题npm audit --fix.我尝试过每一件事.清理缓存.清除所有模块并重新安装但所有模块都相同.

以下是我跑步时的错误 npm audit

$ npm audit

                   === npm audit security report ===                        


                             Manual Review                                  
         Some vulnerabilities require your attention to resolve             

      Visit https://go.npm.me/audit-guide for additional guidance           




  High            Missing Origin Validation                                     

  Package         webpack-dev-server                                            

  Patched in      >=3.1.11                                                      

  Dependency of   webpack-dev-server [dev]                                      

  Path            webpack-dev-server                                            

  More info       https://nodesecurity.io/advisories/725                        

found 1 high severity vulnerability in 60688 scanned packages
  1 vulnerability requires manual review. See the full report for details.