好只是所以它很容易讓人們看到我做了什么得到它在這里工作是：

我認(rèn)為這是我更容易徹底清除SCSS并開箱即用的CSS模塊。這似乎有很大幫助。

我用[email?protected]：christianalfoni/webpack-express-boilerplate.git來幫助我指導(dǎo)自己。知道我有一個工作的東西，實際上教會了我比在webpack之前學(xué)到的更多的東西。正如你可以猜到這不是很多：D

另一個主要的變化，真正幫助改變路徑并不令人意外。但這些都是相對于output.path之前的路徑性別而言的，但我認(rèn)為這是相對于wepack.config.js而言的，并不是說從那里開始，所有內(nèi)容都將被視為文檔根目錄，即使對于html和css也是如此。

**關(guān)鍵部分:) **

我也有更新我的快遞成立，因為我沒有給它一個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']}))

];

}

};

其實我已經(jīng)貼了同樣的回答兩次。但他們都有關(guān)系。可悲的是:(

總結(jié)

以上是生活随笔為你收集整理的热模块替换html,热模块替换启用，但不能正常工作http：// localhost：3000/__ webpack_hmr...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。