标签: webpack-dev-server

我有一个非常简单的项目：

appdir +- app +- main.js +- build +- bundle.js +- index.html +- webpack.config.js

webpack.config.js：

var path=require("path");

module.exports = {
    entry: path.resolve(__dirname, "./app/main.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    }
};

我张家的后main.js，的WebPack-dev的服务器好像它检测到的变化，并进行重新打包的bundle.js，但浏览器仍然收到的旧内容main.js。

我通过执行启动服务器 webpack-dev-server webpack.config.js

有任何想法吗？

当我改变我app.js和main.css同时webpack-dev-server运行时，包被更新。但是当我更改index.html内容时不会刷新；如果我向 HTML 添加一行，webpack-dev-server则不会刷新页面上的任何内容。这是我的webpack.config.js和package.json文件。我希望你能帮助我。

webpack.config.js :

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server'); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
var chalk = require('chalk');  
var env = process.env.WEBPACK_ENV;

var host = 'localhost';
var port = '8080';

var config = {
  devtool: 'source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://' + host + ':' + port +'/',
    './src/app.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module : {
    loaders: [ …

我当前的 webpack 输出配置如下：

output: {
    path: PATHS.build,
    filename: '/[name].[chunkhash].js',
    chunkFilename: '/[chunkhash].js'
}

但是，我有一个条目文件 (custom.js)，我不想添加 [chunkhash] 后缀。我确实想在文件名后添加chuchhash后缀。本质上：

output: {
    path: PATHS.build,
    filename: '/[name].[chunkhash].js',
    chunkFilename: '/[chunkhash].js'
}

我怎样才能做到这一点？

我在这个地址使用vue-cli webpack样板:

vuejs模板/的WebPack

我希望webpack不要在开发模式下缩小和打包js文件.如何实现？问题是我们有一个巨大的测试asp.net webforms应用程序,它已经包含jquery和bootstrap,以一种无法绕过的方式.我与vue有冲突的jquery和bootstrap.js.我无法在开发模式下调试它们.

一些快速背景：

我公司的站点运行 CMS，由 CMS 处理所有路由。没有 html 文件，只有 razor 文件 (.cshtml)。虽然从头开始重做网站是我更喜欢做的，但这不是一种选择，所以我试图通过逐页将 vue.js 与 webpack 开发工作流逐页集成来慢慢地使网站现代化基础。

我花了大量时间设置 webpack，使其只能处理 /dist/ 文件夹中的文件 - 其他所有内容都通过http://my.server/ 提供服务，并由 CMS 和后端处理。

通过反复试验，我设法在 /dist/ 文件夹中获取 webpack-dev-server 服务文件，同时允许服务器的其余部分提供其他所有内容（通过http://my.server/）。不幸的是，这仅在 webpack-dev-server 部分的文件路径特别引用“ http://localhost:8080/ ”时才有效，这显然是不可接受的。

开发环境代码必须与生产环境代码完全一样，因此<script src="http://localhost:8080/dist/build.js"></script>是不可接受的。

但是，如果我只是编写<script src="/dist/build.js"></script>服务器将<script src="http://my.server/dist/build.js"></script>其解析为显然不正确并导致 404（因为这些文件仅从开发服务器提供）。

我的问题是，“如何配置 webpack-dev-server 以从自身提供 /dist/ 文件夹中的所有内容，同时允许通过“ http://my.server ”提供站点上的所有其他内容？

这是我的 webpack.config.js 文件以供参考：

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js' …

问题是Failed to load resource: the server responded with a status of 404 (Not Found)当我使用webpack-dev-server时出现此错误。但是，如果我只是构建项目，则可以运行我的程序index.html并获得预期的结果。我的项目结构是：

public/
  index.html
  assets/
src/
  index.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>PBWA</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="assets/bundle.js"></script>
</html>

这是webpack配置文件

webpack.common.js

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(['assets'])
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/assets')
  }
}

webpack.dev.js

const merge = …

我有一个Angular应用程序和一个用jQuery编写的登录页面。

每当请求位于的根目录时，我都希望为目标网页提供服务http://mywebsite.com。比如说http://mywebsite.com/otherpage，我想服务Angular应用程序。

使用nginx（生产），这相当容易。

在开发Angular时，我们可以/api使用--proxy-config proxy.config.jsonCLI选项轻松代理其他请求，例如。

我遇到的问题是与根级别有关。

我究竟做错了什么？我不能代理根级别吗？

Angular文档告诉我们去Webpack开发服务器文档，但是我仍然不知道该怎么做。

我proxy.config.json的如下：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  },
  "/": {
    "index": "",
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

以下Webpack 开发服务器配置在 macos 系统上运行不会出现错误：

module.exports = {

    // [...]

    devServer: {
        host: 0.0.0.0,
        port: 8080,
        contentBase: "/dist",
        hot: true,
        inline: true,
        watchOptions: {
            poll: true
        }
    },

    // [...]

}

我可以从连接到同一网络并使用机器的本地 IP (192.168.1.65:8080) 的移动设备访问 Web 应用程序。

同样的配置在Windows上不起作用，似乎无法在浏览器上打开0.0.0.0。但使用 0.0.0.0 以外的任何其他 IP 都不允许从移动设备进行访问。有谁知道如何在 Windows 上解决这个问题？

我正在尝试为 ReactJs 设置 webpack。我不知道我的 Webpack 配置文件有什么问题，它给了我

未找到条目模块中的错误：错误：无法解析“D：\ wd \ javascript \ Projects \ ReactJS-Basics中的“./src”

代码在这里 - 两个文件“Webpack.config.js”和“Package.json”

Webpack.config.js 代码是：

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

var DIST_DIR = path.resolve(__dirname,'dist');
var SRC_DIR = path.resolve(__dirname,'src');

var config = {
    entry: SRC_DIR+'/app/index.js',
    output:{
        path:DIST_DIR+'/app',
        filename:'bundle.js',
        publicPath:'/app/'
    },
    module:{
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                use:{
                    loader:'babel-loader',
                    query:{
                        presets:['react','es2015','stage-2']
                    }
                }
            }
        ]
    },
    mode: 'development',
    watch: true

}

module.export = config;

Package.json 文件是

{
  "name": "reactjs-basics",
  "version": "1.0.0",
  "description": "", …

我有一个 VUE 应用程序，我需要在外部链接而不是本地主机上运行它。

我尝试创建一个

vue.config.js

devServer: {
    host: 'http://my-testing-web-address.com',
    port: 8080,
    ...
}

并设置了devserver，但仍然没有变化

当我跑步时

npm run serve

它说

App running at:
- Local:   http://localhost:8080/ 
- Network: http://192.168.0.100:8080

有什么方法可以设置外部开发服务器吗？