继承我的配置:

devServer: {
    contentBase: '/web/dist/',
    hot: true,
    stats: {colors: true},
    inline: true
}

这是我正在运行的gulp任务:

gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) {
    es6promise.polyfill();

    console.log('STARTING DEV SERVER...');

    server = new WebpackDevServer(webpack(webpackDevConfig), webpackDevConfig.devServer);
    server.listen(8080, '0.0.0.0', function (err, stats) {
        if (err) {
             throw new gutil.PluginError("webpack-dev-server", err);
        }

        console.log('DEV SERVER STARTED');

        done();
    });
});

一切都按预期工作,除了热负载(当我更改文件时没有刷新或更改).我在这做错了什么？

可选信息:我正在尝试使用marty.js构建此项目,而webpack dev服务器允许来自react-router的入口点,以便它不仅仅在\ path中工作.

因此,我正在整天研究这个堆栈溢出答案,我无法理解以下代码背后的逻辑以及为什么这个答案有效.

retozi回答:

我设置了一个代理来实现这个目标:

您有一个常规的快速网络服务器,可以在任何>路由上为index.html提供服务,除非它是资产路由.如果它是资产,请求将被代理到web-dev-server

您的反应热入口点仍将直接指向webpack开发服务器,因此热重新加载仍然有效.

假设您在8081上运行webpack-dev-server,在8080运行代理.

我的代码现在看起来像这样,但为了使其工作,我稍后将需要实现marty-express.为了实现我必须首先了解retonzis的答案.

express.js文件

要求

    'use strict';
    var express = require('express');
    var path = require('path');
    var logger = require('morgan');
    var bodyParser = require('body-parser');
    var config = require('../config.json');
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');
    var proxy = require('proxy-middleware');
    var url = require('url');

代理

    var app = express(); //our express instance

    // -------- my proxy----------------------


    app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));//but why do we need …

我使用webpack dev服务器,但无法访问我的bundle.js文件.

编辑:我使用这个webpack配置没有bower-webpack-plugin.

的package.json

{
  "name": "react_modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "bootstrap": "^3.3.5",
    "bower-webpack-plugin": "^0.1.9",
    "css-loader": "^0.21.0",
    "events": "^1.1.0",
    "extract-text-webpack-plugin": "^0.9.0",
    "file-loader": "^0.8.4",
    "history": "^1.13.0",
    "http-server": "^0.8.5",
    "jquery": "^2.1.4",
    "jquery-ui": "^1.10.5",
    "json-markup": "^0.1.6",
    "jsx-loader": "^0.13.2",
    "less": "^2.5.3",
    "less-loader": …

我正试图围绕webpack以及它如何处理资源.

这是我的项目结构:

/dist
  (files that can be pushed to server)
/src
  /styles
    s.less
  /js
    main.js
    a.js
  /img
    splash.png
  profile.html
entry.js (webpack entry file)

我正在做的事情:

• LESS文件被编译为CSS并与JS一起放入bundle
• 图像要么/src/img -> /dist/img以其原始名称复制(适用于大图像),要么复制为base64'd(适用于图标)
• htmls /src/ -> /dist/以其原始名称复制
• 每次我更改样式或js中的html或任何内容时,它都会执行上述步骤并在浏览器中重新加载页面

基本上我需要能够在不触及浏览器窗口的情况下查看当前的应用程序状态

我试过的

我跑了

• webpack-dev-server --content-base /dist --hot-loading(有和没有--hot-loading),但这不会重新加载CSS/LESS更改

• 以上webpack --watch,这解决了CSS重新加载,但我仍然需要手动将html和图像复制到/ dist

• 以上两个以及监视html和图像并将它们复制到dist的gulp任务.这解决了复制问题,但它没有通知webpack-dev-server更改,因此每次更改HTML时我都需要F5; 它击败了热重装的全部目的.

• 我尝试添加,file-loader但这不适用于HTML,因为它生成需要html文件的JS脚本

这是我的entry.js

require("./src/js/main");
require("./src/css/s.less");

和webpack.config.js:

var path = require('path');
var webpack = require("webpack");
module.exports = {
    entry: "./entry.js",
    output: {
        path: path.join(__dirname,'/dist/js'),
        filename: …

我对使用像Webpack及其亲戚这样的构建工具的世界很新,所以也许这个问题有点小,但请理解我.

背景:我正在开发一个客户端Web应用程序(使用reactjs + redux)并使用webpack作为我的构建工具和开发服务器加载器.现在我只需要在开发环境(日志和东西)中制作一些代码行.所以我在网上看到webpack.DefinePlugin插件的用法来设置process.env.NODE_ENV变量,代码是这样的:

plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        })
] 

然后,如果NODE_ENV我的机器上没有设置varibale(此时不是),它会自动设置为开发.我对吗？

生产机器怎么样？我需要将此env变量设置为/etc/environment文件中的"生产" 吗？

那么另一个问题是webpack在我提供应用程序时如何知道NODE_ENV是什么？当我在生产机器上进行构建并在内置的bundle.js中设置时编译？($ webpack --progress -p)

另一个问题是如何在生产或开发环境中启用/禁用功能？只需执行if这样的条件语句:

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

最后一个,如果这是webpack真正做的,它是将这段代码转换为内置的bundle.js吗？如果是这样,最终用户可以看到它吗？那有什么关系吗？

希望它不是很多,谢谢一堆!

我有一些要在开发模式下使用的模拟数据文件，但不包括在我的捆绑软件中。

我的项目结构是：

/src/
    index.html
    Router.jsx
    /components
    /mockdata <- I don't need this guy in my bundle.js

是否可以将/mockdata目录从我的捆绑软件中排除，但仍通过webpack-dev-server提供文件？我没有在webpack文档的输出部分看到任何内容，但希望有一个解决方法。

/mockdata目录中的文件通过ajax加载。我的webpack配置分为两部分：

发展历程

// webpack.config.js

/*eslint-env node*/
var path = require('path');
var webpack = require('webpack');

module.exports = {
  devServer: {
    historyApiFallback: true,
    port: 3000
  },
  entry: './src/Router.jsx',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new webpack.ProvidePlugin({
      React: "react"
    })
  ],
  module: {
    loaders: [
      {
        test: /\.(css|less)$/,
        loader : 'style!css!less'
      },
      {
        test: /\.(js|jsx|es6)$/,
        exclude: /node_modules/,
        loader: 'babel' …

我正在使用webpack-dev-server一个相当大的工作项目.有时,当我保存文件时,它不会重新编译,因为它应该是,并且我被迫重复:w(Vim中的save命令),直到它响应几次.开发服务器"注意到"我正在保存文件并触发重新编译需要花费多长时间,有时候我只是重新启动整个开发服务器.

有没有办法手动强制重新编译以同样的方式保存文件应该这样做？我可以将路径发送到我想要以某种方式重新编译的文件吗？

我的反应应用的工作原理如预期的第一级路线，例如/，/foo和/bar，双方使用的应用程序导航菜单或直接键入网址时，系统到浏览器地址栏的时候。

但是，更深的网址（例如，/foo/bar仅在使用应用程序导航菜单时有效，而在直接将网址输入到浏览器地址栏中时则无效）。

对于depper URL，在刷新页面或直接在地址栏中输入url时，将显示站点index.html（白屏，因为未加载任何内容或样式），但由于没有错误，因此它似乎没有通过响应呈现出现在控制台中，而react dev工具显示黑屏。

我正在使用带有--history-api-fallback选项集的react-router 4.0.0和webpack-dev-server 。我尝试过切换服务器以表示并设置一个catch全部以将所有路由重定向到index.html，以及降级到react-router 3.0.2，但是问题在两个实例中仍然存在。

我将代码缩减到路由器和一些我要路由的裸机的最小数量。

应用程序入口点（index.js）

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

// import components
import AppContainer from './components/AppContainer';

render(
    <LocaleProvider>
        <BrowserRouter>
            <AppContainer/>
        </BrowserRouter>
    </LocaleProvider>, 
    document.querySelector('#main')
);

AppContainer组件

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';

// import components
import Home from './Home';
import About from './About';
import Test from './Test'; …

我在webpack 4中使用extract-text-webpack-plugin提取了css.CSS已被提取但是当我运行npm run build时,css被提取但我在屏幕上显示一条消息说

Entrypoint undefined = extract-text-webpack-plugin-output-filename.

整个堆栈跟踪如下:

$ npm run build

> comp@1.0.0 build /media/azeem/A036C96E36C945CE/DevlopersConsole/Projects/comp
> webpack

Hash: 81ca52e4a0297e3e830f
Version: webpack 4.7.0
Time: 52303ms
Built at: 2018-05-06 23:13:09
       Asset      Size  Chunks             Chunk Names
   bundle.js  4.06 KiB    main  [emitted]  main
css/main.css  58 bytes    main  [emitted]  main
Entrypoint main = bundle.js css/main.css
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/main.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main.scss 197 bytes [built]
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/one.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/one.scss 183 bytes [built]
[./src/app.js] 162 bytes {main} [built]
[./src/main.scss] 41 bytes [built]
[./src/one.scss] 41 bytes [built]
[0] multi ./src/app.js ./src/main.scss 40 …

我将Symfony 4和Symfony Encore一起使用来处理资产和一些有用的功能，例如HMR。

目前，我可以处理Sass文件，CSS文件，JS等，并且可以与HMR正常工作。

现在，我希望能够使Weback开发服务器监视* .twig文件进行更改并触发实时重新加载（因为热重新加载对于服务器端呈现的模板而言不是一种选择）。

我已经看到了有关--watchContentBase和contentBase选项的信息，但就我而言，它什么也没做：

WDS CLI：

./node_modules/.bin/encore dev-server --hot --disable-host-check --watchContentBase --contentBase ./templates/ --reload

webpack.config.js：

const Encore = require('@symfony/webpack-encore');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .autoProvidejQuery()  
    .addPlugin(new MiniCssExtractPlugin('[name].css'))
    .enableSourceMaps(!Encore.isProduction())
    .addLoader({
        test: /\.(sc|sa|c)ss$/,
        use: ['css-hot-loader'].concat(
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader'
            },
            {
                loader: 'postcss-loader'
            },
            // {
            //     loader: 'postcss-loader'
            // },
            {
                loader: 'sass-loader'
            }            
        ),
      },)
      .addLoader({
        test: /\.twig$/,
        loader: 'raw-loader'
      },)
    .enableVersioning(Encore.isProduction())
    .addEntry('autocall-main', './assets/js/index.js')
    // .addStyleEntry('autocall-main', ['./assets/scss/index.scss'])
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
; …