标签: webpack-dev-server

我对webpack相当新,但是在使用css-loader或file-loader时遇到了一些问题.

我正在尝试加载背景图像,但它不能正常工作.尽管devtools显示了background-image样式,但未显示背景图像.

如果我将background-image样式复制到element.style块中,一切正常.我在某个地方犯了一个愚蠢的错误吗？

body标签应该有背景图片.该样式出现在开发人员工具中,没有错误:

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg,但身体没有背景.

如果我element.style在DevTools中手动复制并粘贴css行,一切正常:

如果我在Chrome和Firefox中捆绑使用webpack-dev-server或仅使用它,就会发生这种情况webpack.

其他款式,如body { background-color: red }做工精细.

这是webpack.config.js:

const path = require('path');

module.exports = {
    "entry": [
        './src/index.js'
    ],
    "output": {
        "path": path.join(__dirname, 'build'),
        "filename": "bundle.js"
    },
    devtool: "source-map",
    "module": {
        "loaders": [
            {
                "test": /\.scss$/,
                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]
            },
            { 
                test: /\.jpg$/, 
                loader: "file-loader" 
            }
        ]
    },
    devServer: {
        contentBase: './build'
    }
};

我正在使用vue-cli webpack-simple模板生成我的项目,我想将请求代理到一个单独的后端服务器.如何轻松实现这一目标？

默认的webpack CLI输出对我来说太冗长了.一旦我从我的一个文件导入React,输出就会爆炸,显示所有正在打包的块(？):

webpack result is served from /
content is served from /Users/me/myproject
Hash: aaaf5afc6582f3222f55
Version: webpack 1.12.14
Time: 1175ms
   Asset    Size  Chunks             Chunk Names
index.js  677 kB       0  [emitted]  main
chunk    {0} index.js (main) 643 kB [rendered]
    [0] ./src/app.js 574 bytes {0} [built] [1 error]
    [1] ./~/react/react.js 56 bytes {0} [built]
    [2] ./~/react/lib/React.js 1.49 kB {0} [built]
    [3] ./~/react/lib/ReactDOM.js 3.71 kB {0} [built]
    [4] ./~/process/browser.js 2.06 kB {0} [built]

...

  [155] ./~/fbjs/lib/mapObject.js 1.47 kB {0} [built]
  [156] ./~/react/lib/onlyChild.js 1.21 …

我在React Router中使用Webpack dev服务器和browserHistory来通过HTML5 History API操作url.historyapifallback-option在我的webpack配置文件中不起作用.刷新后http://localhost:8080/users或http://localhost:8080/products我得到404.

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');

const TARGET = process.env.npm_lifecycle_event;

var common = {
    cache: true,
    debug: true,
    entry: './src/script/index.jsx',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        sourceMapFilename: '[file].map'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

if(TARGET === 'dev' || !TARGET) …

我正试图webpack-dev-server在Docker容器内运行,然后通过NGINX主机访问它.初始index.html加载但与开发服务器的Web套接字连接无法连接.

VM47:35与'ws://example.com/sockjs-node/834/izehemiu/websocket'的WebSocket连接失败:WebSocket握手期间出错:意外响应代码:400

我正在使用以下配置.

map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

upstream webpack_dev_server {
  server node;
}

server {
  server_name _;
  listen 80;
  root /webpack_dev_server;

  location / {
    proxy_pass http://webpack_dev_server;
  }

  location /sockjs-node/ {
    proxy_pass http://webpack_dev_server/sockjs-node/;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;  # pass the host header - http://wiki.nginx.org/HttpProxyModule#proxy_pass

    proxy_http_version 1.1;  # recommended with keepalive connections - http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version

    # WebSocket proxying - from http://nginx.org/en/docs/http/websocket.html
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
  }
}

我正在使用，@vue/cli v3.7.0并且通过vue create myappBabel + Router + node-sass 创建了一个项目，并且我的项目已成功安装

但是当我运行npm run serve（在项目目录中）时，出现以下错误：

 INFO  Starting development server...
 ERROR  ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

    at validateOptions (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\node_modules\schema-utils\src\validateOptions.js:32:11)
    at new …

我让我的webpack生成一个大的main.js文件(1.7mb),其中包含一个小于20-30个文件的项目,每个文件少于100行.所需的依赖项数量很少(React,Fluxible),我正在使用我能理解的每个优化插件:

module.exports = {
  output: {
    path: './build',
    publicPath: '/public/',
    filename: '[name].js'
  },
  debug: false,
  devtool: 'eval',
  target: 'web',
  entry: [
  'bootstrap-sass!./bootstrap-sass.config.js',
  './client.js',
  ],
  stats: {
    colors: true,
    reasons: false
  },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      'styles': __dirname + '/src/styles',
      'components': __dirname + '/src/scripts/components',
      'actions': __dirname + '/src/scripts/actions',
      'stores': __dirname + '/src/scripts/stores',
      'constants': __dirname + '/src/scripts/constants',
      'mixins': __dirname + '/src/scripts/mixins',
      'configs': __dirname + '/src/scripts/configs',
      'utils': __dirname + '/src/scripts/utils'
    }
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: …

我正在使用webpack-dev-server进行热模块更换.它运行得很好,但这个错误每隔几秒就会在控制台中显示:GET http://mysite:8080/__webpack_hmr 404 (Not Found).

这是我的webpack.config.js:

var webpack = require('webpack'),
    hostname = 'mysite',
    port = 8080;

module.exports = {
    entry: [
        'babel-polyfill',
        './src/js/main.js',
        './dev/requireCss.js',
        'webpack/hot/dev-server',
        // I'm assuming the fault lies in the following line, but I can't figure out what's wrong
        'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'
    ],
    output: {
        path: __dirname + '/webpack',
        filename: "bundle.js",
        publicPath: 'http://'+hostname+':'+port+'/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loaders: ['react-hot', 'babel-loader?presets[]=react&presets[]=es2015']
        } // removed some loaders for brevity
        ]
    },
    resolve: {
        extensions: …

我webpack-dev-server用来在本地充当CDN服务器,以提供各种静态资产,如css,js,html等.

一切运行正常,但出于调试目的,我无法看到CDN服务器收到的请求.

webpack-dev-server 只是沉默,并且一旦编译了静态资产包,就不会显示任何信息/错误.

我也通过命令行帮助,但没有成功.

我成功地设置了WebPack - 它正在编译我的babel和SCSS文件就好了,我让手表功能正常工作.但是我也想使用热模块更换 - 而且我遇到了困难.当我在浏览器中加载开发服务器时,它会显示Cannot resolve module 'webpack/hot/dev-server'.我的配置如下所示:

import webpack from 'webpack';
import wpServer from 'webpack-dev-server';

var compiler = webpack({
    entry: [
        './src/core.js',
        'webpack/hot/dev-server'
    ],
    output: {
        path: outPath,
        filename: '[name].js'
    },
    resolveLoader: { root: path.join(MODULE_PATH, "node_modules") },
    module: {
        loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
          { test: /\.scss$/, loader: "style!css!sass" }
        ]
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    watch: true
});

var server = new wpServer(compiler, {
    contentBase: outPath,
    hot: true,
    quiet: false,
    noInfo: false, …