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'] }) ] }
最终生成的项目目录截图
