动手写webpack配置--6.webpack 插件

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.

项目名webpackDemo；

上节：https://blog.csdn.net/fengsh998/article/details/88078127提到了热更新。

本节继续看下插件。

热门的插件的使用可以在官网：https://webpack.js.org/plugins/中可以找到。

本节主要学习HtmlWebpackPlugin 这个插件。

在前面几章都是手写的html.尽管也可以飞起来。但如果我们把webpack中的output中的filename修改了或加上hash值后，每次都得手动的把html中的src引用部份进行修改。于是这个插件就是为解决这个问题而生的。

插件的使用官网:https://github.com/jantimon/html-webpack-plugin#options

使用插件啊，我建议大家第一时间找官网查看，别百度瞎搜。搜出来的都是针对某个情况的。要想详细了解插件，就得看他的母文。就算是英文。不怕，大不了google译一下，看不懂中文，再译回英文呗。

1.安装插件.

npm i --save-dev html-webpack-plugin

2.修改webpack.config.js增加插件.

扫描二维码关注公众号，回复： 5402245 查看本文章

const path = require('path');
const htmlplugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        app: path.join(__dirname, 'src', 'index.js')
    },
    mode: 'development',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlplugin()
    ],
    module: {
        rules: [{
            test: /\.(js|jsx)$/,      //当碰到js或jsx文件时,即文件中用到import 或reqire导入js时
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["es2015", "react"]
                }
            },
            exclude: [
                path.resolve(__dirname, './node_modules')
            ]
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        overlay: true,
        hot: true,
        inline: true
    }
}

然后把dist中的文件全部删除。

把package.json中修改个打包脚本

...
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

执行npm start可以看到dist下自动生成了一个bundle.js和index.html。而这两个在插件的官网中有提到，如果没有配置默认情况下是生成output中的filename自动插入到生成的index.html中。

生成的html

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

可以看到，已经不是我们前面课程中的了。因为很明显<div id='root'></div>已经不见了。这个时候如果冒昧的用npm run dev

来运行。会得到下面的结果。

从错误中提出target container is not a dom element。目标容器不是一个dom元素。还记得我们的 index.js么。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'));

这里有一个渲染DOM到root上，但index.html自动生成后主丢失了。那怎么解决。这个时候模板文件就体现出来了。

查看插件的option说明。有个template属性。

在webpack.config.js的目录下创建一个public文件夹里面创建一个index.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>Template</title>
</head>

<body>
    <div id='root'></div>
</body>

</html>

目录结构:

修改webpack.config.js

module.exports = {
    ...
    plugins: [
        new htmlplugin({
            title: 'Html 插件 Demo',
            template: path.join(__dirname, 'public', 'index.html')
        })
    ],
...
}

看到另上了title和使用模板index.html

先执行npm start 可以看到，在dist中输出了bundle.js和index.html但详细看你会发现title并没有给我们替换。这是为啥呢。这是因为模板替换的地方需要使用参数。

<%= htmlWebpackPlugin.options.title %>

修改html模板中的title.

<html lang="en">
...
    <title><%= htmlWebpackPlugin.options.title %></title>
...

</html>

修改完成重新编译运行，OK。至此html自动生成，打包插入完成。其它option请各自参与api自行玩玩。

动手写webpack配置--6.webpack 插件

猜你喜欢