如何用热重装

我是新与webpack代码玉的WebPack HTML，试图建立简单的配置代码的HTML/CSS与jade模板，PostCSS，hot reload并通过webpack-dev-server提供HTML加快编码经验。如何用热重装

所以我将有多个入口点，其中包括一些jade文件，CSS，img，字体和其他资源。

任何webpack配置建议？谢谢。

我试过html-webpack-plugin，与配置类似

new HtmlWebpackPlugin({ 
    filename:'page1.html', 
    templateContent: function(templateParams, compilation) { 
     var templateFile = path.join(__dirname, './src/page1.jade'); 
     compilation.fileDependencies.push(templateFile); 
     return jade.compileFile(templateFile)(); 
    }, 
    inject: true, 
})

它的工作，但对玉没有热重装包括，没有CSS/IMG/FONT资产..

后来我发现indexhtml-webpack-plugin但似乎仅与HTML文件一起工作，不支持模板。

EDIT1：

现在，我结束了与此webpack.config.js：

var path = require('path'), 
    webpack = require('webpack'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    node_modules_dir = path.resolve(__dirname, 'node_modules'); 

module.exports = { 
    entry: { 
     index: ['webpack/hot/dev-server', './index.js'], 
     page2: ['webpack/hot/dev-server', './page2.js'], 
     //vendors: ['react', 'jquery'], 
    }, 
    output: { 
     filename: '[name].js', 
     path: path.resolve(__dirname, 'build'), 
     publicPath: path.resolve(__dirname, '/'), 
     libraryTarget: "umd" 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin(), 
     //new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), 
     new webpack.dependencies.LabeledModulesPlugin(), 
    ], 
    module: { 
     noParse: [ 
      new RegExp('^react$'), 
      new RegExp('^jquery$'), 
     ], 
     loaders: [ 
      { test: /\.js$/, loader: "babel-loader", query: {optional: ["es7.classProperties"]}}, 
      { test: /\.html$/, loader: "html" }, 
      { test: /\.jade$/, loader: "jade" }, 
      { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }, 
      { test: /\.woff$/, loader: 'url-loader?prefix=font/&limit=5000&minetype=application/font-woff'}, 
      { test: /\.ttf$/, loader: 'url-loader?prefix=font/'}, 
      { test: /\.eot$/, loader: 'url-loader?prefix=font/'}, 
      { test: /\.svg$/, loader: 'url-loader?prefix=font/'}, 
      { test: /\.png$/, loader: "url-loader?prefix=img/&mimetype=image/png"}, 
      { test: /\.jpg$/, loader: "url-loader?prefix=img/&mimetype=image/jpg"}, 
      { test: /\.gif$/, loader: "url-loader?prefix=img/&mimetype=image/gif"} 
     ], 
    }, 
    postcss: function() { 
     return { 
      defaults: [ 
      require('autoprefixer') 
      ] 
     } 
    } 
} 

Object.keys(module.exports.entry).forEach(function(page){ 

    if(page!=='vendors'){ 
     module.exports.plugins.push(new HtmlWebpackPlugin({ 
      filename: page+'.html', 
      chunks: [page] 
     })); 
    } 
})

一个index.js入口点的样子：

import index from './templates/index.jade'; 
require('./css/index.css'); 
if (typeof document !== 'undefined') { 
    document.body.innerHTML = index(); 
}

这是工作设置为我的目前HTML/CSS开发。

来源

2015-09-04 arturkin

感谢您花时间发布您的工作设置！（如果你喜欢，你也可以将它作为解决方案发布） – Ben

它看起来像html-webpack-plugin可以采取模板参数，这可能需要一个明确的装载机（作为其文档中看到），或使用配置装载机：

// webpack.config.js 

var HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.jade$/, 
     loader: 'jade' 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: './src/index.jade' 
    }) 
    ] 
}

来源

2016-02-16 05:07:06 macro

为我工作，ty！ – Entertain

谢谢，从他们添加模板支持的那一刻起使用它（问题提出时不支持）。 – arturkin

有一个jade-html-loader。我即将尝试设置它。

由于去https://stackoverflow.com/a/32312078

我是新来的WebPack过了，我想玉HTML装载机是一个更具体的装载机，做的HTML装载机做同样的事情，但仅限于玉。

编辑：咩，HTML-的WebPack-插件

来源

2015-09-25 16:05:59

如何用热重装

回答

相关问题