1、安装
npm i html-loader --save-dev
2、项目目录
layout文件夹下的footer.html文件为：
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
layout文件夹下的head-common.html文件为：
<meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="keywords" content="MMall，happymmall，MMall电商，网上购物，网上商城，数码产品，手机，笔记本，相机，手表，耳机，电商视频，电商教程，电商源码下载"><meta name="description" content="一个提供数码通讯、手机、电脑、家居百货、服装服饰、母婴、图书、食品等数万种优质商品，最优质、最便捷的网上购物平台。"><link rel="dns-prefetch" href="//cdn.bootcss.com"><link rel="dns-prefetch" href="//s.happymmall.com"><link rel="dns-prefetch" href="//img.happymmall.com"><script>var _hmt = _hmt || [];(function() { ?var hm = document.createElement("script"); ?hm.src = "https://hm.baidu.com/hm.js?bc210cd22928076d28296716d9dfcf01"; ?var s = document.getElementsByTagName("script")[0]; ??s.parentNode.insertBefore(hm, s);})();</script>login.html文件为（已包含配置）：
<!DOCTYPE html><html> ???<%= require(‘html-loader!./layout/head-common.html‘) ?%> ???<body> ???????<%= require(‘html-loader!./layout/footer.html‘) ?%> ???</body></html>
3、webpack.config.js文件为：
//处理html模板var htmlWebpackPlugin = require(‘html-webpack-plugin‘);//处理共用、通用的jsvar webpack = require(‘webpack‘);//css单独打包var ExtractTextPlugin = require("extract-text-webpack-plugin");// 获取html-webpack-plugin参数的方法 var getHtmlConfig = function(name, title){ ???return { ???????template ???: ‘./src/view/‘ + name + ‘.html‘, ???????filename ???: ‘view/‘ + name + ‘.html‘, ???????favicon ????: ‘./favicon.ico‘, ???????title ??????: title, ???????inject ?????: true, ???????hash ???????: true, ???????chunks ?????: [‘common‘, name] ???};};module.exports = { ???// ???entry: ‘./src/app.js‘, ???entry: { ???????//通用模块 ???????‘common‘: [‘./src/page/common/index.js‘], ???????‘login‘: [‘./src/page/login/index.js‘], ???????‘index‘: [‘./src/page/index/index.js‘] ???}, ???output: { ???????path: __dirname + ‘/dist‘, ???????filename: ‘js/[name].js‘ ???}, ???//将外部变量或者模块加载进来 ???externals: { ???????‘jquery‘: ‘window.jQuery‘ ???}, ???module: { ???????loaders: [{ ???????????????test: /\.js$/, ???????????????//以下目录不处理 ???????????????exclude: /node_modules/, ???????????????//只处理以下目录 ???????????????include: /src/, ???????????????loader: "babel-loader", ???????????????//配置的目标运行环境（environment）自动启用需要的 babel 插件 ???????????????query: { ???????????????????presets: [‘latest‘] ???????????????} ???????????}, ???????????//css 处理这一块 ???????????{ ???????????????test: /\.css$/, ???????????????use: ExtractTextPlugin.extract({ ???????????????????fallback: "style-loader", ???????????????????use: [ ???????????????????????//‘style-loader‘, ???????????????????????{ ???????????????????????????loader: ‘css-loader‘, ???????????????????????????options: { ???????????????????????????????//支持@important引入css ???????????????????????????????importLoaders: 1 ???????????????????????????} ???????????????????????}, ???????????????????????{ ???????????????????????????loader: ‘postcss-loader‘, ???????????????????????????options: { ???????????????????????????????plugins: function() { ???????????????????????????????????return [ ???????????????????????????????????????//一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效 ???????????????????????????????????????require(‘postcss-import‘)(), ???????????????????????????????????????require("autoprefixer")({ ???????????????????????????????????????????"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] ???????????????????????????????????????}) ???????????????????????????????????] ???????????????????????????????} ???????????????????????????} ???????????????????????} ???????????????????] ???????????????}) ???????????}, ???????????//less 处理这一块 ???????????{ ???????????????test: /\.less$/, ???????????????use: ExtractTextPlugin.extract({ ???????????????????fallback: "style-loader", ???????????????????use: [ ???????????????????????//‘style-loader‘, ???????????????????????{ ???????????????????????????loader: ‘css-loader‘, ???????????????????????????options: { ???????????????????????????????//支持@important引入css ???????????????????????????????importLoaders: 1 ???????????????????????????} ???????????????????????}, ???????????????????????{ ???????????????????????????loader: ‘postcss-loader‘, ???????????????????????????options: { ???????????????????????????????plugins: function() { ???????????????????????????????????return [ ???????????????????????????????????????//一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效 ???????????????????????????????????????require(‘postcss-import‘)(), ???????????????????????????????????????require("autoprefixer")({ ???????????????????????????????????????????"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] ???????????????????????????????????????}) ???????????????????????????????????] ???????????????????????????????} ???????????????????????????} ???????????????????????}, ???????????????????????‘less-loader‘ ???????????????????] ???????????????}) ???????????},// ???????????//处理html模板// ???????????{// ???????????????test: /\.html$/,// ???????????????use: {// ???????????????????loader: ‘html-loader‘// ???????????????}// ???????????}, ???????????//处理图片 ???????????{ ???????????????test: /\.(png|jpg|gif|svg)$/i, ???????????????loaders: [ ???????????????????//小于8k的图片编译为base64，大于10k的图片使用file-loader ???????????????????????????????‘url-loader?limit=8192&name:img/[name]-[hash:5].[ext]‘, ???????????????????//图片压缩 ???????????????????‘image-webpack-loader‘ ???????????????] ???????????} ???????] ???}, ???plugins: [ ???????//html模板处理// ???????new htmlWebpackPlugin({// ???????????template: ‘index.html‘,// ???????????filename: ‘index.html‘,// ???????????inject:true,// ???????????hash:true,// ???????????chunks:[‘common‘,‘index‘]// ???????}), ???????new htmlWebpackPlugin(getHtmlConfig(‘index‘, ‘首页‘)), ???????????new htmlWebpackPlugin(getHtmlConfig(‘login‘, ‘登录页‘)), ???????// 独立通用模块到js/common.js ???????new webpack.optimize.CommonsChunkPlugin({ ???????????//公共块的块名称 ???????????name: ‘common‘, ???????????//生成的文件名 ???????????filename: ‘js/common.js‘ ???????}), ???????//css 单独打包到文件 ???????new ExtractTextPlugin(‘css/[name].css‘) ???]}注：html-loade已经在login.html中配置好了。
4、执行命令&查看效果
npm run webpack
webapck html-loader实现资源复用
原文地址：http://www.cnblogs.com/mengfangui/p/7590615.html