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'); //处理共用、通用的js
var 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
