webpack（四）自动化生成html文件

1、安装html-webpack-plugin插件

（1）npm安装

输入命令：npm install html-webpack-plugin --save-dev

如果出错就换成该命令：cnpm i --save-dev [email protected]

（根据经验使用第一条命令容易出错，建议使用第二条命令）

（2）淘宝镜像安装

输入命令：cnpm install html-webpack-plugin --save-dev（注：此种添加依赖的方法容易出错，建议输入命令：cnpm i --save-dev [email protected]）

2、在webpack.config.js引入html-webpack-plugin插件

const path = require('path');   //引入模块
const htmlWebpackPlugin = require('html-webpack-plugin');  //引入html-webpack-plugin插件

module.exports ={    //js资源的打包
 // mode:"development",    //webpack4.x需添加的内容，webpack3.x则需要注释掉
  entry: {
    hello:path.join(__dirname,'./src/script/hello.js'),
    word:path.join(__dirname,'./src/script/word.js') //打包入口文件路径+文件名
  },
  output: {   //打包完输出的文件
    path: path.join(__dirname,'./dist/js'),   //打包输出文件的路径
    filename: "[name].boudle.js"    //打包输出的文件
    //有多个打包入口文件时，则filename需要[name]或[hash]或[name]-[hash]占位
  },
  plugins:[   //插件，注意后面有“s”
    //初始化html插件
    new htmlWebpackPlugin()
  ]
}
           

3、输入命令npm run webpack打包（也可以使用webpack）

（1）要使用npm run webpack 打包，需要在package.json文件的scripts添加语句

"scripts": {
    "webpack": "webpack --config webpack.config.js --progress --display-modules --displas"
           

（2）打包成功

整个过程中出现过的报错：

（1）未在webpack项目根目录下添加webpack依赖，而是在总项目根目录下添加的依赖

输入npm run webpack报以下错误：

解决方案：在webpack项目根目录下添加依赖

（2）自动化生成html文件，当版本为webpack3.x的时候，不能在webpack.config.js增加“mode:‘development’ ”语句（对于只是打包文件而不自动化生成html，在webpack3.x下似乎无影响），否则会报以下错误：

解决方法（1）：

解决方案（2）：仍使用webpack4.x，但版本不兼容，并且之前添加webpack4.41.0依赖失败，需要重新添加依赖并升级html-webpack-plugin

输入命令：cnpm i --save-dev [email protected]

cnpm install --save-dev [email protected]

运行npm run webpack

总结：

（1）添加依赖时一定要指定版本

例子：

npm i --save-dev [email protected]（添加最新版）

cnpm install --save-dev [email protected]版本号

添加其他的插件依赖方法类似

（2）不能出现重复命名，即使不在同一个文件夹

html-webpack-plugin插件的选件

1、可以将配置选项的哈希值传递给html-webpack-plugin，允许值如下：

参考文档：https://github.com/jantimon/html-webpack-plugin#options

2、常用的配置选件

（1）

plugins: [  //插件
    //初始化html插件
    new htmlWebpackPlugin({
      template: "./src/example.html",  //指定模板
      filename:'./webhtml/helloWord.html',  //编译后出口的文件名及路径
      inject: 'body', //把脚本放在哪个脚本内，head或者body
      title: "Webpack App"  //页面的title，模板html可以通过引用这个变量来展示
    })
  ]
           

（2）要在模板中引用title这个变量，需要在模板html中title标签中添加引用语句

（3）在平时项目中，并不希望html文件与js文件在同一级目录下，修改webpack.config.js文件中的output属性值

output: {
    path: path.join(__dirname,'./dist'),  //打包出口文件目录
    filename: "boudle/[name].boudle.js"  //输出的文件名，输出js可以在这里指定。例如该例子就指定输出的js目录是./dist/boudle
  },
           

（3）在控制台输入命令：npm run webpack

（4）项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath 设置域名等绝对地址前缀

const path = require('path');  //引入模块
const htmlWebpackPlugin = require('html-webpack-plugin');   //引入插件

module.exports={
  mode: "development",  //mode的类型
  entry:{
    word: path.join(__dirname,'./src/script/word.js'),   //打包的入口文件路径+文件名
    welcome: path.join(__dirname,'./src/script/welcome.js')
  },
  output: {
    path: path.join(__dirname,'./dist'),  //打包出口文件路径
    filename: "boudle/[name].boudle.js" , //输出的文件名
    publicPath: "http://www.zs.com" //项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀
  },
  plugins: [  //插件
    //初始化html插件
    new htmlWebpackPlugin({
      template: "./src/example.html",  //模板
      filename:'./webhtml/helloWord.html',  //编译后的文件名及路径
      inject: 'body', //把脚本放在哪个脚本内，head或者body
      title: "Webpack App"  //页面的title，模板html可以通过引用这个变量来展示
    })
  ]
};

           

（5）压缩html文件。使用minify 进行压缩

plugins: [  //插件
    //初始化html插件
    new htmlWebpackPlugin({
      template: "./src/example.html",  //模板
      filename:'./webhtml/helloWord.html',  //编译后的文件名及路径
      inject: 'body', //把脚本放在哪个脚本内，head或者body
      title: "Webpack App",  //页面的title，模板html可以通过引用这个变量来展示
      minify:{  //压缩html
        collapseWhitespace:true, //删除空格
        removeComments:true, //去除注释
      }
    })
  ]
           

效果：

其他参数可查看文档：https://github.com/kangax/html-minifier#options-quick-reference

（6）根据一个模板文件生成多个html页面，并且每个页面引用不同的js文件

生成多个html文件，需要初始化多个htmlWebpackPlugin插件

const path = require('path');  //引入模块
const htmlWebpackPlugin = require('html-webpack-plugin');   //引入插件

module.exports={
  mode: "development",  //mode的类型
  entry:{
    //打包的入口文件chunk，可以是一个string字符串，也可以是一个数组，还可以是一个json对象
    word: path.join(__dirname,'./src/script/word.js'),   //打包的入口文件路径+文件名
    welcome: path.join(__dirname,'./src/script/welcome.js')
  },
  output: {
    path: path.join(__dirname,'./dist'),  //打包出口文件路径
    filename: "boudle/[name].boudle.js" , //输出的文件名
    publicPath: "http://www.zs.com" //项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀
  },
  plugins: [  //插件
    //初始化html插件
    //生成多个html文件，需要初始化多个htmlWebpackPlugin插件
    new htmlWebpackPlugin({   //hello.html
      template: "./src/example.html",  //模板
      filename:'./webhtml/welcome.html',  //编译后的文件名及路径
      inject: 'body', //把脚本放在哪个脚本内，head或者body
      title: "WebpackApp-Hello",  //页面的title，模板html可以通过引用这个变量来展示到新页面
      minify:{  //压缩html
        collapseWhitespace:true, //删除空格
        removeComments:true, //去除注释
      },
      chunks: ["welcome"]  //引用entry的哪一个chunks（引用哪一个入口文件）
    }),
    new htmlWebpackPlugin({   //word.html
      template: "./src/example.html",  //模板
      filename:'./webhtml/word.html',  //编译后的文件名及路径
      inject: 'body', //把脚本放在哪个脚本内，head或者body
      title: "WebpackApp-Word",  //页面的title，模板html可以通过引用这个变量来展示到新页面
      minify:{  //压缩html
        collapseWhitespace:true, //删除空格
        removeComments:true, //去除注释
      },
      chunks: ['word'] //引用entry的哪一个chunks
    })
  ]
};
           

效果：

总结：

<% %>为js的模板引擎的运行符

<%= %>则为js的模板引擎取值符