webpack打包原理入门探究（四）插件探究（上）

同名公众号 - 人生代码

于 2020-06-01 07:33:31 发布

阅读量647

点赞数

本文链接：https://blog.csdn.net/qq_36772866/article/details/106485297

版权

使用 html-webpack-plugin 打包自动生成 index.html

首先，我们需要安装 html-webpack-plugin

npm install html-webpack-plugin --save-dev

配置 webpack.html.plugin.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: {
        main: resolve('src/scripts/main.js'),
        a: resolve('src/scripts/a.js')
    }, // 指定入口文件
    output: {
        path: resolve('dist/js'),
        // filename: '[name]-[hash].js'
        filename: "[name]-[chunkhash].js"
    },
    plugins: [
        new htmlWebpackPlugin()
    ]
}

配置 package.json

运行 npm run webpack.html.plugin

效果如下，在 dist 目录生成 index.html,同事也引入了 a.js, main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="a-a1ad07a706a1b2702814.js"></script></body>
</html>

那如果我们打包的是根目录的 index.html,会发生什么情况呢？

我们修改一下 webpack.html.plugin.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: {
        main: resolve('src/scripts/main.js'),
        a: resolve('src/scripts/a.js')
    }, // 指定入口文件
    output: {
        path: resolve('dist/js'),
        // filename: '[name]-[hash].js'
        filename: "[name]-[chunkhash].js"
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html', // 指定根目录下的 index.html
        })
    ]
}

再运行 npm run webpack.html.plugin

dist 下的 index.html 发生了改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="main.bundle.js"></script>
<script type="text/javascript" src="main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="a-a1ad07a706a1b2702814.js"></script></body>
</html>

根目录下的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="main.bundle.js"></script>
</body>
</html>

但是我们会发现，所有的东西都生成在 js 文件中了，继续修改一下配置

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: {
        main: resolve('src/scripts/main.js'),
        a: resolve('src/scripts/a.js')
    }, // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name]-[chunkhash].js"
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html', // 指定根目录下的 index.html
        })
    ]
}

再运行一下指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack a </title>
</head>
<body>
<script type="text/javascript" src="js/main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="js/a-a1ad07a706a1b2702814.js"></script></body>
</html>

嗯，这一节课就讲到这里吧