webpack基础——插件，自动生成html引入打包后的js文件，html模板 

npm i html-webpack-plugin

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入

module.exports = {
  entry: {
    main: path.join(__dirname, './src/js/index.js'),
    sub: path.join(__dirname, './src/js/index.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join('./src/html/index.html')   //定义用于引入打包文件的html模板，如果没有这个原始模板，只引入了打包后的js，但是js里如果有需要操作模板里的节点的情况，就要报错
    })
  ]
}

栗子

模板
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

打包后会在dist下生成打包后的 main.js sub.js，并自动引入到html模板里
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <script defer="defer" src="main.js"></script>
    <script defer="defer" src="sub.js"></script>
</head>

<body>
    <div id="app"></div>
</body>

</html>

如果没有定义模板，就会生成：（即没有内容的原始模板）
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <script defer="defer" src="main.js"></script>
    <script defer="defer" src="sub.js"></script>
</head>

<body></body>

</html>

这里的 js 引入时用的行对路径，但有时我们需要指定的域名，可以通过出口里的 publicPath 项配置

output: {
    publicPath: 'http://xxx.com/',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

打包后得到如下格式的引入
<script defer src="http://xxx.com/index.js"></script>

posted on 2022-06-13 23:17  In-6026  阅读(315)  评论(0)  编辑  收藏  举报

导航