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
<!DOCTYPE html><html><head><title></title></head><body><div id="mydiv" class="div1"></div></body></html>

不配置chunks
<!DOCTYPE html>
<html>
<head>
    <title></title>
 
<link href="app.min.css" rel="stylesheet">
<link href="app2.min.css" rel="stylesheet"></head>
<body>
 <div id="mydiv" class='div1'></div>
  
<script type="text/javascript" src="./app.bundle.js"></script>
<script type="text/javascript" src="./app2.bundle.js"></script></body>
</html>

配置chunks 为'[app]'
<!DOCTYPE html>
<html>
<head>
    <title></title>
 
<link href="app.min.css" rel="stylesheet"></head>
<body>
 <div id="mydiv" class='div1'></div>
  
<script type="text/javascript" src="./app.bundle.js"></script></body>
</html>

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']
   })
  ]
}

最终生成的项目目录截图

2.1.7 html的处理与打包

猜你喜欢