webpack(二）根据模板生成简单的html文件

时间 2019-12-08

原文原文链接

（一）使用webpack 根据模板生成HTML，首先须要安装插件 html-webpack-plugin。javascript

　　　在工程文件夹安装插件命令以下：html

npm install html-webpack-plugin --save-dev

(二）java

　　新建 webpack.config.js，名称能够更改，更改后运行时，需指定配置文件名称。webpack

　　例如，配置文件名为 my.webpack.config.js,　则须要在package.json 文件中，在scripts 处添加以下代码：web

"scripts": {
    "webpack": "webpack --config webapack.config.js --progress --display--modules --colors --dispaly-reason"
  }

　　编译时，需使用 npm run webpack 命令。npm

（三）编程

　　webpack是支持 AMD、CMD、ES6模块化编程的，所以，咱们是能够使用 require、exports 来获取、返回模块内容的。json

　　在webpack.config.js，添加以下代码模块化

　　咱们将原始文件放在 /src/js 文件夹，打包复制后的文件放在 /dist/js 文件夹。ui

var htmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
   /* entry:'./src/scripts/main.js',*/
    entry:{
        main:'./src/scripts/main.js',  //文件来源路径
        a:'./src/scripts/a.js'
    },
    output:{
        path:'./dist',
        filename:'js/[name]-[hash].js', //生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js，main-2ea5b2e9b258a8bbba73.js
        publicPath:'http://cdn.com'  //publicPath 用于发布时，生成的羽毛
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html', //经过模板生成的文件名
            template:'index.html',//模板路径
            inject:false, //是否自动在模板文件添加 自动生成的js文件连接
            title:'这个是WebPack Demo',
            minify:{
                removeComments:true //是否压缩时 去除注释
            }
        })
    ]
};

　　　咱们能够在模板 index.html 书写相似 PHP、ASP.net 的语法格式。

　模板index.html文件模板内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title><%=htmlWebpackPlugin.options.title%></title>
    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry%>"></script>
</head>
<body>
<div>
    :<=JSON.stringify(htmlWebpackPlugin.files[key])>
    <input type="text">
    <% for(var key in htmlWebpackPlugin.options){%>
        <%=key %>:<%=JSON.stringify(htmlWebpackPlugin.options[key])%>
    <%}%>

    <% for(var key in htmlWebpackPlugin.files){%>
    <%=key %>:<%=JSON.stringify(htmlWebpackPlugin.files[key])%>
    <%}%>
    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry%>"></script>
</div>
</body>
</html>

　　运行 webpack，便可生成HTML 文件。

webpack(二） 根据模板生成简单的html文件

webpack(二）根据模板生成简单的html文件