Webpack插件实战-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

下面演示2个插件的使用。官方文档。

1、安装插件。

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

2、在webpack.config.js中配置插件。

使用导入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

const Cleanwebpackplugin = require('clean-webpack-plugin');

plugins属性中配置插件。这里表示

plugins: [
    new HtmlWebpackPlugin({template : './index.html'}),
    new Cleanwebpackplugin(['dist'])
]

3、创建index.html

根目录下创建index.html

index.html的内容如下：注意里面没有任何的js。

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

<div id="box2"></div>

</body>
</html>

4、使用webpack命令看效果。

运行webpack命令。可以看到，index.html被复制到目标目录下面，并且index.html中引入了我们打包好的js文件。

这就是插件HtmlWebpackPlugin的作用。new HtmlWebpackPlugin({trmplete : './index.html'})表示使用当前目录下的index.html作为模板。复制到打包的目标目录，并且把打包好的js导入。

clean-webpack-plugin 作用是删除指定目录下的所有资源。可以删除多个目录。

配置好 new Cleanwebpackplugin(['dist']) 当运行webpack命令时，就会删除根目录下的dist文件夹。

转载于:https://my.oschina.net/kunBlog/blog/1634113

6、插件使用

1、安装插件。

2、在webpack.config.js中配置插件。

3、创建index.html

4、使用webpack命令看效果。