标签: webpack-dev-server

我是否希望优先加载节点包,并且只有在不存在时才加载bower包.

我只会按照Webpack网站中的建议使用节点包,但是我需要加载一个只有凉亭的库,https://github.com/Stamplay/stamplay-js-sdk 和 https://github.com/stamplay /角stamplay

尝试使用bower-webpack-plugin

我安装了https://github.com/lpiepiora/bower-webpack-plugin

但是当我运行时webpack-dev-server -d --watch,错误显示在chrome控制台中:

Uncaught TypeError: angular.module is not a function(anonymous function) @ app.js:8__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39
angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the …

我正在从头开始自学webpack,webpack-dev-server当我在我的app文件中更改.js并显示更改时,我正在尝试使用实时更新浏览器.说我有以下内容package.json

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "serve": "webpack-dev-server --hot",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

这是我的webpack.config.json

const path = require('path');

    const config = {
        entry: './app/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                }
            ],
        }
    }; …

当浏览器点击“webpackified”文件中的以下行时，我收到此错误app.js：

/******/ (function(modules) { // webpackBootstrap
/******/    function hotDisposeChunk(chunkId) {
/******/        delete installedChunks[chunkId];
/******/    }
/******/    var parentHotUpdateCallback = this["webpackHotUpdate"];

在此片段的最后一行中，this未定义。

尽管出现此错误，该应用程序似乎运行得很好。

我不确定webpack.config.js文件的哪些部分最相关，但以下是一些可能相关的片段：

webpack.config.js

const HotModuleReplcement = new webpack.HotModuleReplacementPlugin();

...

module.exports = {

  ...

  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 8000,
    open: true,
    proxy: [{
      context: ['/assets', '/api'],
      target: 'http://localhost:4000',
      secure: false
    }]
  },
  plugins: [HotModuleReplcement, HtmlWebpack]
};

知道这里发生了什么吗？

我正在使用 Webpack 进行 WP 主题开发，并且我真的很想使用 HMR。因此，根据我常用的 webpack conf（使用 BrowserSync 插件执行实时重新加载），我想修改它以便正确使用webpack-dev-server该hot选项。

这是我到目前为止所做的：

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PostCSSCSSNext = require('postcss-cssnext')();
const WPThemeConfig = require('./wp.config');
// const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const extractSass = new ExtractTextPlugin(`css/${WPThemeConfig.cssFileName}.min.css`);


module.exports = merge(common, {
  mode: 'development',
  plugins: [
    extractSass,    
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    // new BrowserSyncPlugin({
    //   host: 'localhost',
    //   port: 3000,
    //   proxy: 'http://localhost:8888/'
    // })
  ], …

以下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

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

我使用 Create-react-app 和npm start命令在开发服务器中为我的应用程序提供服务。默认情况下，应用程序由https://localhost:3000/提供服务。然而，我的应用程序使用需要特定上下文路径的cookie。如何从https://localhost:3000/app/提供应用程序？

我正在react-hot-loader本地环境中使用它来开发我的 React + Firebase 应用程序。

对于没有 API 调用的基本组件，我可以立即看到更改（它只更新更改的部分）。但是，当我设计一个在内部具有 API 调用的组件（useEffect如下例所示）时，它会不断重新运行所有内容（包括效果），并且我会丢失当前状态。

我更改某些内容后的日志：

我不确定问题是否是由于useEffectAPI 调用引起的。

问题

我怎样才能解决这个问题？就像，如果我更改标签的 CSS 颜色，我希望所有状态保持不变并仅更新更改的部分。

例子：

ComponentWithApiCall.js

function ComponentWithAPICall() {

  const [loading,setLoading] = useState(true);
  const [dataFromAPI,setDataFromAPI] = useState(null);

  useEffect(()=>{

    // CALL API WAIT FOR RESULTS
    setDataFromAPI(result);
    setLoading(false);

  },[]);

  return(
    dataFromAPI &&
      <div>
        // WHATEVER
      </div>
  );
}

这是我当前的配置react-hot-loader。我也在使用webpack和webpack-dev-server。

webpack.dev.js

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true
  },

  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HashedModuleIdsPlugin()
  ], …

我使用脚本语言创建了一个后端项目，并使用 Vue-CLI 创建了一个前端项目。该项目已在域中进行测试example.localhost。在测试环境中我运行Vue-CLI开发版本（localhost:8080）并在项目页面上使用它example.localhost:80。这部分有效。“热重载”不起作用。

在 Vue-CLI、Webpack 和 SockJS 项目存储库上，我看到了有关由于 SockJS 的更改而导致此模块失败的问题线程，但添加了一个解决方法，直到 SockJS 案例得到解决。

我在我的案例中找到了一个有效的配置，但是这个配置非常依赖于测试域名，这是我想避免的。我希望它能够在其他测试域上工作，但它无法以当前的形式工作。

在之前的尝试中，我什至遇到了 CORS 的情况，但在准备这个示例时，我无法再次获得这种状态。我不接受 的解决方案disableHostCheck: true。问题是，它必须在不影响安全性的情况下工作。

./ docker-compose.yml

version: '3'

services:
  dev:
    image: gander/dev:7.3
    volumes:
      - ./public/index.html:/www/example.localhost/public/index.html
    ports:
      - 80:80

./public/index.html​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
<div id="app">Vue App</div>
<script src="http://localhost:8080/js/app.js"></script>
</body>
</html>

./包.json

{
  "name": "sandbox-vue-dev",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": …