从0到上线开发企业级电商项目_前端_10_webapck对HTML模版的处理

 

通过阅读本文，你将能够解决以下几个问题：

  • 添加版本号
  • src中的html打包到dist里面
  • 建立通用模块

 

一、打包html到单独的文件夹

1.安装 html-webpack-plugin

首先我们使用一个插件,这是官方文档html-webpack-plugin。

    安装一下

npm install html-webpack-plugin –save-dev

改一下page -> view -> index.html的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title></title> 
 </head> 
 <body> 
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
 </body>
</html>

 

2.配置html-webpack-plugin

改一下webpack的配置文件,require一下插件，再配置插件参数：

var webpack = require(‘webpack’);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(‘html - webpack - plugin’);
var config = {
    entry: {‘common’: [‘. / src / page / common / index.js’],
        ‘index’: [‘. / src / page / index / index.js’],
        ‘login’: [‘. / src / page / login / index.js’],
    },
    output: {
        path: ‘. / dist’,
        filename: ‘js / [name].js’
    },
    externals: {‘jquery’: ‘window.jQuery’
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }]
    },
    plugins: [
    //独立通用模块到js/base.js
    new webpack.optimize.CommonsChunkPlugin({
        name: ‘common’,
        filename: ‘js / base.js’
    }),
    //把css单独打包到文件
    new ExtractTextPlugin("css/[name].css"),
    //html模版的处理
    new HtmlWebpackPlugin({
        template: ‘. / src / view / index.html’,
        filename: ‘view / index.html’,
        inject: true,
        hash: true,
        chunks: [‘common’, ’index’]
    })]
};
module.exports = config;

 

3.参数说明（来自于官方文档）

filename: The file to write the HTML to. Defaults to index.html. You can specify a subdirectory here too (eg: assets/admin.html).
template: Webpack require path to the template. Please see the docs for details.
inject: true | 'head' | 'body' | false Inject all assets into the given template or templateContent – When passing true or 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element.
hash: true | false if true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting

之后执行webpack，打开dist -> view -> index.html 看到插件插入的脚本已经进来了。

我们发现了一个问题，就是每一个页面都需要new一次这个插件并且更改参数，因此我们封装一个函数来解决这个问题。根据参数来修改我们之前的配置文件。

4.html-webpack-plugin 配置优化

var webpack = require(‘webpack’);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(‘html - webpack - plugin’);
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name) {
    return {
        template: ‘. / src / view / ’ + name + ‘.html’,
        filename: ‘view / ’ + ‘name’ + ‘.html’,
        inject: true,
        hash: true,
        chunks: [‘common’, name]
    }
}
//webpack config
var config = {
    entry: {‘common’: [‘. / src / page / common / index.js’],
        ‘index’: [‘. / src / page / index / index.js’],
        ‘login’: [‘. / src / page / login / index.js’],
    },
    output: {
        path: ‘. / dist’,
        filename: ‘js / [name].js’
    },
    externals: {‘jquery’: ‘window.jQuery’
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }]
    },
    plugins: [
    //独立通用模块到js/base.js
    new webpack.optimize.CommonsChunkPlugin({
        name: ‘common’,
        filename: ‘js / base.js’
    }),
    //把css单独打包到文件
    new ExtractTextPlugin("css/[name].css"),
    //html模版的处理
    new HtmlWebpackPlugin(getHtmlConfig(‘index’)), new HtmlWebpackPlugin(getHtmlConfig(‘login’)), ]
};
module.exports = config;

 

之前我们还没有建立login.html，所以现在新建一个
src -> view ->login.html

<!DOCTYPE html>
<html>
 <head> 
  <title></title> 
 </head> 
 <body> 
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
 </body>
</html>

执行webpack我们看到 dist -> login.html 已经出来了，说明我们刚才封装的方法是成功的，

5.独立出html-head

在刚才的操作中我们发现了一个问题，我们的页面模版包括jquery的应用每次都要在页面中输入一遍，接下来我们使用webpack require anything的特点来解决这个问题。

新建 view -> layout ->html-head.html

<head>
  <meta charset=utf-8">
</head>

在view -> layout -> index.html中require一下我们刚才的html-head.html

并且指明一下loader（现在还没安装，先指明一下）。!表示这个文件用html-loader来指定。

<!DOCTYPE html>
<html lang="en">

<%= require('html-loader!./layout/html-head.html')%>    

<body>
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    
</body>
</html>

 

安装一下html-loader

npm install html-loader –save-dev

 

执行webpack，看到打包成功。

打开dist -> view -> index.html看到刚才的head-html.html已经被引入进来了。

 

 

二、参考资料：

1.webapck对HTML模版的处理

posted @ 2017-12-30 21:19  shirayner  阅读(217)  评论(0)    收藏  举报