2.1.7 html的处理与打包

webpack可以自动生成HTML，自动引入js和css

html生成

需要用到的plugin    cnpm install html-webpack-plugin --save-dev

相关配置

filename     -- 打包生成的 html 文件的名字
template     -- 指定一个 html 文件为模板 （以本地html文件为模板）
minify       -- 压缩html （去掉空格，换行）
inject       -- 是否把js，css文件插入到html，插入到哪 
chunks       -- 多入口时，指定引入chunks

1、引入插件  

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

2、在插件中注册

plugins:[
   new htmlWebpackPlugin({
      filename:"index.html",
      template:"./index.html",
      minify:{
        collapseWhitespace: true
      },
      inject:false,
      // chunks:['app'] //多入口
   })
 ]    

生成的index.html
"mydiv" class="div1">

不配置chunks



    
 
"app.min.css" rel="stylesheet">
"app2.min.css" rel="stylesheet">

 
"mydiv" class='div1'>
  

配置chunks 为'[app]'



    
 
"app.min.css" rel="stylesheet">

 
"mydiv" class='div1'>
  

 

webpack.config.js

var extractTextCss=require('extract-text-webpack-plugin');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports= {
    entry:{
     app:"./app.js",
     app2:"./app2.js"
    },
    output:{
        path:__dirname+"/src/dist",
        filename:"./[name].bundle.js",
    },
     resolve:{
     alias: {
       a2:"./js/app2.js",
     }
     },
    module:{
        rules: [
     {
       test:/\.less$/,
       use:extractTextCss.extract({
        fallback:{
           loader:'style-loader',
           options:{
            //insertInto:"#mydiv",
            singleton:true,
            //transform:"./transform.js"
           }
         },
        use:[
         {
           loader:'css-loader',
           options:{
             modules:{
              localIdentName:'[path][name]_[local]_[hash:4]'
             }                    
           } 
         },
         {
          loader:'less-loader'
         }        
        ]
       })
     }
     ]
    },
  plugins:[
   new extractTextCss({
    filename:'[name].min.css'
   }),
   new htmlWebpackPlugin({
      filename:"index.html",
      template:"./index.html",
      // minify:{
      //   collapseWhitespace: true
      // },
      // inject:false,
      chunks:['app']
   })
  ]
}

最终生成的项目目录截图