启用了热模块替换,但无法正常使用http:// localhost:3000 / __ webpack_hmr

杰米·赫伯(Jamie Hutber)

我的问题是,无论我做什么,我都会得到404,但wepack_hmr我终生无法弄清为什么它不可用。

完整的Webpack配置

var url = 'http://localhost:3000';

module.exports = {

    resolve: {
        extensions: ['', '.js']
    },

    entry: ['webpack-hot-middleware/client','./src/client/js/Kindred'],

    devtool: 'cheap-module-source-map',

    module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']}
            },
            {test: /\.png$/, loader: "url-loader?limit=100000"},
            // Images
            {test: /\.jpg$/, loader: "file-loader"},
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=./font/[name].[ext]'
            },
            // Stylesheets
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 
                [
                    'css?sourceMap&modules&importLoaders=1',
                    'sass?sourceMap&modules',
                ]
            ) },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/font/[name].[ext]' }
        ]
    },

    sassLoader: {
        includePaths: [ 'src/client/scss' ]
    },

    plugins: process.env.NODE_ENV === 'production' ? [
        new ExtractTextPlugin ('app.css', {allChunks: true}),
        new webpack.optimize.DedupePlugin (),
        new webpack.optimize.OccurrenceOrderPlugin (),
        new webpack.optimize.UglifyJsPlugin ()
    ] :  [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("style.css")
    ],

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

    output: {
        path: path.join(__dirname),
        publicPath: '/',
        filename: 'bundle.js'
    }

};

要运行的节点cmd

webpack-dev-server --inline --history-api-fallback --port 3000

加载页面时

[HMR] Waiting for update signal from WDS...
home:1 GET http://localhost:3000/__webpack_hmr 
client:22 [WDS] Hot Module Replacement enabled.

它需要我运行,但不是:/

杰米·赫伯(Jamie Hutber)

好的,这样人们可以很容易地看到我为使它在这里工作而做了什么:

我认为完全删除scss并使开箱即用css模块变得更容易。这似乎有很大帮助。

我使用[email protected]:christianalfoni / webpack-express-boilerplate.git帮助我完成自己的工作。知道自己有工作经验,实际上教会了我很多东西,这比我在上手Webpack之前学到的要多得多。如您所知,这不是很多:D

真正有帮助的一个主要变化就是毫不奇怪地改变了道路。但这与output.path我之前阅读过的路径性有关,但认为与路径性wepack.config.js无关,即使对于html和css,从那里开始,所有内容都可以算作文档根目录。

**关键部分 :) **

我还必须更新我的快速设置,因为我没有给它指定express.static路径...噢,我的愚蠢,我怎么能错过这样的基本东西呢。

表示

app.use(express.static(__dirname + '/public/')); //Don't forget me :(

最终CSS

/* Webfont: Lato-Black */@font-face {
    font-family: 'LatoBlack';
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('/font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Wekpack.config

'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');

module.exports = {
    devtool: 'eval-source-map',
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'src/client/js/Kindred')
        // path.join(__dirname, 'app/main')
    ],
    output: {
        path: path.join(__dirname, '/public/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]}
            }, {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.jpg$/, loader: "file-loader"
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders&' + qs.stringify({
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[path][name]-[local]'
                    }),
                    'postcss-loader?parser=postcss-scss'
                ]
            },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
        ]
    },
    postcss: function (webpack) {
        return [
            stripInlineComments
            , precss
            , autoprefixer
            , require('postcss-simple-vars')
            , require('postcss-nested'
            , autoprefixer({browsers: ['last 2 versions']}))
        ];
    }
};

实际上,我已经两次发布了相同的答案。但是它们都是相关的。可悲的是:(

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

__webpack_hmr转到错误的端口并失败

来自分类Dev

无法访问 http://localhost:3000/

来自分类Dev

POST http:// localhost:3000/404(未找到)

来自分类Dev

Ruby on Rails在Windows上无法连接到localhost:3000、127.0.0.1:3000和0.0.0.0:3000

来自分类Dev

ruby - 运行 http://localhost:3000/admin/users 但redirect_to http://localhost:3000/admin/login

来自分类Dev

使用PUMA的Rails,将localhost:3000更改为localhost:3000 / example

来自分类Dev

使用代理目标将用户从localhost:3000移至localhost:3000 / auth / google

来自分类Dev

为什么我不能在React中使用axios从localhost:3000调用localhost localhost:5000

来自分类Dev

$ .getJSON将'http:// localhost:3000'添加到api URL

来自分类Dev

POST http://localhost:3000/signin 400 (Bad Request) in react

来自分类Dev

无法在无业游民的轨道上连接localhost:3000 ruby

来自分类Dev

无法运行localhost:3000:呈现白色空白页

来自分类Dev

无法访问localhost:3000 ruby on rails ubuntu

来自分类Dev

无法阻止 localhost:3000 重定向到 https

来自分类Dev

无法启动“curl:localhost:3000”端口,显示 URI 错误

来自分类Dev

在 React 中将所有内容放在 http://localhost:3000/app 而不是 http://localhost:3000/ 下的最简单方法

来自分类Dev

代理错误:无法将请求 /users 从 localhost:3000 代理到 http://localhost:3001/

来自分类Dev

代理错误:无法将请求/付款从localhost:3000代理到https:// localhost:5000 /

来自分类Dev

http:// localhost:3000 / api / stuff的Http失败响应:400错误的请求

来自分类Dev

ERR_CONNECTION_REFUSED http:// localhost:3000 / socket.io / socket.io.js

来自分类Dev

Ember CLI和Rails:代理到http:// localhost:3000时出错

来自分类Dev

从http:// localhost:3000 / app / main.js加载“ @ angular / platform-browser-dynamic”时出错

来自分类Dev

GET http:// localhost:3000 / components / t.mp3 net :: ERR_ABORTED 404(未找到)

来自分类Dev

react-full-page会阻止我的页面以特定ID(例如http:// localhost:3000 /#someIdWhereIWantThePageToBeOpened)打开

来自分类Dev

拒绝从'http:// localhost:3000 / style.css'应用样式,因为它的MIME类型('text / html')

来自分类Dev

身份验证POST http:// localhost:3000 / api / users / register 400(错误请求)MERN应用

来自分类Dev

GET http:// localhost:3000/404(未找到),实际上是在拨打POST却获得GET

来自分类Dev

如何从user_path(:current)获取“ http:// localhost:3000 / users / current”?

来自分类Dev

错误:正在加载http:// localhost:3000 / rxjs / RX(…)的XHR错误(找不到404)

Related 相关文章

  1. 1

    __webpack_hmr转到错误的端口并失败

  2. 2

    无法访问 http://localhost:3000/

  3. 3

    POST http:// localhost:3000/404(未找到)

  4. 4

    Ruby on Rails在Windows上无法连接到localhost:3000、127.0.0.1:3000和0.0.0.0:3000

  5. 5

    ruby - 运行 http://localhost:3000/admin/users 但redirect_to http://localhost:3000/admin/login

  6. 6

    使用PUMA的Rails,将localhost:3000更改为localhost:3000 / example

  7. 7

    使用代理目标将用户从localhost:3000移至localhost:3000 / auth / google

  8. 8

    为什么我不能在React中使用axios从localhost:3000调用localhost localhost:5000

  9. 9

    $ .getJSON将'http:// localhost:3000'添加到api URL

  10. 10

    POST http://localhost:3000/signin 400 (Bad Request) in react

  11. 11

    无法在无业游民的轨道上连接localhost:3000 ruby

  12. 12

    无法运行localhost:3000:呈现白色空白页

  13. 13

    无法访问localhost:3000 ruby on rails ubuntu

  14. 14

    无法阻止 localhost:3000 重定向到 https

  15. 15

    无法启动“curl:localhost:3000”端口,显示 URI 错误

  16. 16

    在 React 中将所有内容放在 http://localhost:3000/app 而不是 http://localhost:3000/ 下的最简单方法

  17. 17

    代理错误:无法将请求 /users 从 localhost:3000 代理到 http://localhost:3001/

  18. 18

    代理错误:无法将请求/付款从localhost:3000代理到https:// localhost:5000 /

  19. 19

    http:// localhost:3000 / api / stuff的Http失败响应:400错误的请求

  20. 20

    ERR_CONNECTION_REFUSED http:// localhost:3000 / socket.io / socket.io.js

  21. 21

    Ember CLI和Rails:代理到http:// localhost:3000时出错

  22. 22

    从http:// localhost:3000 / app / main.js加载“ @ angular / platform-browser-dynamic”时出错

  23. 23

    GET http:// localhost:3000 / components / t.mp3 net :: ERR_ABORTED 404(未找到)

  24. 24

    react-full-page会阻止我的页面以特定ID(例如http:// localhost:3000 /#someIdWhereIWantThePageToBeOpened)打开

  25. 25

    拒绝从'http:// localhost:3000 / style.css'应用样式,因为它的MIME类型('text / html')

  26. 26

    身份验证POST http:// localhost:3000 / api / users / register 400(错误请求)MERN应用

  27. 27

    GET http:// localhost:3000/404(未找到),实际上是在拨打POST却获得GET

  28. 28

    如何从user_path(:current)获取“ http:// localhost:3000 / users / current”?

  29. 29

    错误:正在加载http:// localhost:3000 / rxjs / RX(…)的XHR错误(找不到404)

热门标签

归档