Webpack插件的安装和使用-html-webpack-plugin

一.前言

之前"webpack介绍"一篇中提到webpack的四个核心概念:
entry-入口,output-出口,loader-加载器,plugins-插件

前面几几篇已经用到了entry, output, loader,这一篇使用plugins-插件

二,Webpack插件

webpack官方插件列表-包含插件的安装和基本用法:
https://webpack.docschina.org/plugins/

三,Webpack插件的安装和使用

在之前的几篇介绍中,在dist目录创建的index.js中引入的bundle.js路径会根据各种情况而修改

在devServser下使用:
    <script type="text/javascript" src="bundle.js"></script>

在设置了output.publicPath:: 'js/'的情况下,会强制去此路径下寻找资源:
    <script type="text/javascript" src="js/bundle.js"></script>

webpack提供了一个可以动态生成html文件的插件:html-webpack-plugin
html-webpack-plugin可以为生成的html页面自动添加静态资源引用的script标签

还有常用插件:clean-webpack-plugin,webpack打包输出前删除指定目录代码

以html-webpack-plugin和clean-webpack-plugin为例:

html-webpack-plugin用于自动生成html

安装html-webpack-plugin和clean-webpack-plugin

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

安装完安成后查看package.json:

{
  "name": "webpack_test",
  "version": "1.0.0",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

修改webpack.config.js配置文件,添加对插件的使用配置

const path = require('path');
// 自动生成html的插件-根据模板页面生成新的页面
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除之前打包的文件
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/js/entry.js',
    output: {
        filename: 'bundle.js',
        //publicPath: 'js/',
        path: path.resolve(__dirname, 'dist/js/')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: 'dist/'
    },
    plugins: [
        // 使用模板./index.html根据当前的index.html页面生成新的页面
        new HtmlWebpackPlugin({template: './index.html'}),
        // 需要使用插件清除的文件名,当执行webpack命令时会先将指定目录下的文件删除
        new CleanWebpackPlugin(['dist']),
    ]
};

四,测试html-webpack-plugin插件

由于html-webpack-plugin可以自动为我们生成html页面,所以我们将写死的js引用删除

将原dist/index.html页面放入项目根目录,作为模板页面供html-webpack-plugin使用:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

删除之前dist目录下的输出文件,工程目录如下:

重新执行webpack命令打包输出:

重新打包输出

index.html内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

    <script type="text/javascript" src="bundle.js"></script></body>
</html>

html-webpack-plugin插件按照配置,使用根目录下index.html为模板生成页面
放入output.path配置的输出目录'dist/js/'下
新生成的dist/index.html中自动添加了引用bundle.js的script标签
index.html和静态资源在同一目录下,所以不存在引用路径找不到的问题
所以可以将output.publicPath: 'js/'配置项注释掉

五,测试clean-webpack-plugin插件

为了测试clean-webpack-plugin插件清除指定目录下的全部文件
在上边生成好的dist目录下创建一个aaa.js,这是一个webpack不会生成的文件
如果重新执行webpack命令打包输出后,dist目录中不再包含此文件,
说明在输出前,clean-webpack-plugin插件为我们清除了该目录

如上操作,新输出的dist目录下没有aaa.js文件

六,结尾

本篇介绍了webpack插件的安装和使用
在webpack的世界里,一切皆为模块,
webpack只能处理js和json类型的文件(模块),不能直接处理css,图片的文件
对于css和图片的处理要借助于loader转换器,将其转换为webpack可以处理的模块
对于loader不能处理的资源,可以使用plugins插件来处理,
webpack社区提供了多种多样的插件供我们使用,我们也可以自己定义插件


webpack的介绍暂时到这里,接下来会更新关于Vue.js的知识
后续结合Vue.js项目,将会介绍webpack的优化及自定义插件等

示例代码下载:

CSDN下载