标签: webpack-dev-server

我尝试使用webpack来管理项目中的文件.我使用webpack-dev-server和bower-webpack-plugin.当我运行服务器时,我在浏览器控制台中出错.

找不到模块:错误:无法解析模块'server'

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js', //this is the default name, so you can skip it
        //at this directory our bundle file will be available
        //make sure port 8090 is used when launching webpack-dev-server
        publicPath: 'http://localhost:8090/assets'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {   
                test: /\.js[x]?$/, 
                loaders: ['react-hot', 'jsx', 'babel'],
                exclude: /node_modules/ 
              },
              {
                test: /\.scss$/,
                loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
              }
        ]
    },
    plugins: …

当我尝试代理此http://localhost:9000/rpc请求时,我收到:

cannot proxy to https://example.appspot.com:80 
  (write EPROTO  101057795:error:140770FC:SSL routines:
  SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:794:)

webpack-dev-derver配置:

devServer: {
    contentBase: "./",
    hostname: 'localhost',
    port: 9000,
    proxy: {
        '/rpc': {
            target: 'https://example.appspot.com',
            secure: false,
            changeOrigin: true     // **Update-2 SOLVED**
        }
    }
}

我使用fetch:fetch('/rpc' ...来发出请求,Windows 10专业人员运行webpack.

没有代理:fetch('https://example.com/rpc' ...SSL请求正常.

更新.我不得不使用SSL端口443(参见Steffen的回答).
现在使用:https://example.appspot.com:443

但仍然没有合作secure: true.控制台日志显示:

cannot proxy to https://example.appspot.com:443 
(Hostname/IP doesn't match certificate's altnames: "Host: localhost. 
is not in the cert's altnames: DNS:*.appspot.com, DNS:*.thinkwithgoogle.com, …

目前我们正在使用Webpack作为我们的模块加载器,而Gulp正在使用其他所有东西(sass - > css和dev/production构建过程)

我想把webpack的东西包装成gulp,所以我要做的就是打字gulp,启动,监视和运行webpack以及我们设置的其余部分.

所以我找到了webpack-stream并实现了它.

gulp.task('webpack', function() {
    return gulp.src('entry.js')
        .pipe(webpack({
            watch: true,
            module: {
                loaders: [
                    { test: /\.css$/, loader: 'style!css' },
                ],
            },
        }))
        .pipe(gulp.dest('dist/bundle.js'));
});

问题是它为.js文件生成一个随机字符名称,我们如何在我们的应用程序中使用它？

来自github回购:

上面将src/entry.js编译成资产,其中webpack为dist /,输出文件名为[hash] .js(webpack生成的构建哈希值).

你如何重命名这些文件？每次保存编辑时,新的gulp任务也会生成一个新文件:

我不能使用c2212af8f732662acc64.js我需要它命名为bundle.js或其他正常的东西.

我们的Webpack配置:

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// http://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack

module.exports = {
    entry: "./entry.js",
    devtool: "source-map",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "app/assets/js/bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: PROD ? …

我正在尝试使用路由器延迟加载Angular 2模块,我遇到了这个错误:

error_handler.js:50 EXCEPTION:未捕获(在承诺中):错误:找不到模块'app/home/home.module'

我尝试了所有似乎对其他人有用的答案,比如这个似乎是每个人都面临这个问题的解决方案,但是不适用于我在Angular2 RC7和angular-cli webpack中加载Lazy

这是我的代码:app.module

import { MediatorService } from './home/mediator.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';


import appRoutes from "./app.routes";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    appRoutes
  ],
  providers: [MediatorService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routes

import { RouterModule } from …

如何在我的 proxy.conf.json 中定义多个代理路径？github 上的angular-cli 代理文档看起来只能有一个路径 (/api)：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

但是当我查看webpack 代理或http-proxy-middleware文档时，我发现应该可以定义多个路径（/api-v1 和 /api-v2）：

// Multiple entry
proxy: [
  {
    context: ['/api-v1/**', '/api-v2/**'],
    target: 'https://other-server.example.com',
    secure: false
  }
]

但我不明白如何将其放入 proxy.conf.json。

我决定尝试一个新项目的WebPack,我今天正在开发,我从源图中得到了非常奇怪的行为.我在文档中找不到任何相关内容,在浏览StackOverflow时也无法找到其他任何人遇到此问题.

我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序- 没有对代码,构建环境或任何内容进行任何更改.

我安装了所有东西并像这样运行:

vue init webpack test && cd test && npm install && npm run dev

查看我的源图,我看到以下内容:

这是一个热点.为什么有三个版本HelloWorld.vue和App.vue？更糟糕的是,每个版本的代码版本略有不同,并且没有一个版本与原始源代码匹配.将HellowWorld.vue在根目录下坐着不匹配原始来源,但它是什么的做的,而不是那里./src/components的文件夹？最后,为什么没有第四个App.vue拥有它的原始来源？

据我所知,这可能与WebPack加载器有关.但是,我从来没有遇到任何其他捆绑包的这类问题.以下是使用Browserify Vue-CLI模板执行完全相同步骤的示例:

没有webpack://架构,只有每个文件的一个副本,文件实际上包含原始源代码(对于源映射很重要),没有意外(webpack)/buildin或(webpack)-hot-middleware没有.子目录,....只是源代码.

我注意到安装webpack-dev-server@webpack/webpack#next实际上安装了webpack(没有任何警告).但是,不再有webpack-dev-server可执行文件了.

在Webpack 4中是否有替代品,或者我是否需要单独的Web服务器？

使用热重新加载快速启动Web服务器非常方便.在Webpack 4中推荐的方法是什么？

(为什么我要烦恼Webpack 4？因为它支持原生的.mjs模块)

PS C:\Projects\webpack_react_starter> npm run start

webpack_react_starter@1.0.0启动webpack服务--模式开发--env开发--hot--端口3000

C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\UseEffectRulePlugin.js:160 抛出ruleSetCompiler.error( ^

错误：编译规则集失败：“loader”上的查询参数已被删除，以支持“options”属性（位于ruleSet[1].rules[2].loader：url-loader?limit=10000&name=img/[name] .[ext]) 在 RuleSetCompiler.error (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:373:10) 在 C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\UseEffectRulePlugin .js:160:29 在 Hook.eval [作为调用] (eval at create (C:\Projects\webpack_react_starter\node_modules\tapable\lib\HookCodeFactory.js:19:10), :47:1) 在 RuleSetCompiler.compileRule (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:177:19) 在 C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9 在数组。地图 () 在 RuleSetCompiler.compileRules (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:153:16) 在 RuleSetCompiler.compileRule (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules \RuleSetCompiler.js:184:30) 在 C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9 在 Array.map ()

我已经在webpack上研究了几个星期了,我已经看过许多前端设置的例子,可能只是后端的这一个设置.

我正在尝试设置一个带有节点后端的反应应用程序(例如express,koa,hapi等),其中我需要至少一个后端的转换步骤(例如babel,coffeescript等),并且我认为在那里使用webpack以保持一致性与在混合中添加另一种构建机制(例如gulp,grunt等)会很好.

如果我可以对后端进行更改并让服务器自动重启(监视样式)也会很棒.

我想知道最好的方法是基本上有两个不同的项目设置与自己的package.json和webpack.config文件.也许将后端一个嵌套server在顶级项目文件夹的文件夹下,并使用顶级package.json文件中的一个或多个脚本指令来控制这两个.

我想我可能需要将一台服务器代理到另一台服务器以避免CORS问题.

寻找任何更多webpack战斗测试的指导,而不是我的体面设置.

问候,托尼.

当我尝试更改我的react组件并保存它以查看hot loader是否更新了我的页面时,我在我的开发人员工具中得到了这个:

GET http://localhost:3000/public/bundle/76566a1ad7e45b834d4e.hot-update.json 404 (Not Found)hotDownloadManifest @ main.js:26hotCheck @ main.js:210check @ main.js:9288(anonymous function) @ main.js:9346
main.js:9303 [HMR] Cannot find update. Need to do a full reload!
main.js:9304 [HMR] (Probably because of restarting the webpack-dev-server)

我不确定为什么会这样.我试图运行django作为我的后端服务器(webpack说明)

这是我的webpack.watch.js:

var path = require('path');
var config = require("./webpack.config.js");
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var port = process.env.WEBPACK_PORT || 3000;
var host = process.env.HOST || 'localhost';

config.entry.unshift(
    "webpack-dev-server/client?http://" + host + ":" + port,
    "webpack/hot/only-dev-server"   // only prevents reload …