目录
首先,插件(Plugins)的目的在于解决loader无法实现的其他事。
webpack提供了许多的插件以支持打包时进行更多的操作。另外,除了webpack提供的原生插件,许多第三方插件也使我们的打包更加便捷。
现在我们来看两个实际打包过程中会经常用到的插件:HtmlWebpackPlugin和CleanWebpackPlugin
HtmlWebpackPlugin提供哪些功能呢?概括来说就是它简化了HTML文件的创建。
我们先安装HtmlWebpackPlugin:
webpack-demo/dist/dist.html文件现在是这样的:
dist.html:
现在将这个文件删除!!
同时修改webpack.config.js:
webpack.config.js:
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入HtmlWebpackPlugin
- module.exports = {
- mode: 'development',
- entry: {
- main: './src/index.js'
- },
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist')
- },
- module: {
- rules: [
- {
- test: /\.(png|svg|jpg|gif$)/, // 文件后缀名匹配通配符
- use: [{
- loader: 'url-loader', // 使用的loader
- options: {
- limit: 10240 // 当图片小于10kb时,使用base64的方式进行打包
- }
- }]
- },
- {
- test: /\.scss$/,
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: {
- importLoaders: 2
- }
- },
- 'sass-loader',
- 'postcss-loader'
- ]
- },
- {
- test: /\.(woff|woff2|eot|ttf)$/,
- use: [
- 'file-loader'
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebpackPlugin()
- ]
- }
注意:上面除了加入HtmlWebpackPlugin还将出口文件名设置为了bundle.js。
现在进行打包操作:
确实打包出了bundle.js文件,现在再查看dist文件夹:
可以发现多出来一个index.html文件,打开看看:
index.html:
index.html文件中自动引入了打包的文件bundle.js,原来HtmlWebpackPlugin插件就是帮我们构建一个html文件,且能自动引入打包文件!
可是我们原先的dist.html还有一个div元素,难道要我们自动在index.html中添加吗?
并不用,HtmlWebpackPlugin可以帮我们来做这件事情。
首先,在src文件夹中创建一个template.html:
template.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>
- <div id="webContent"></div>
- </body>
- </html>
修改webpack.config.js文件:
webpack.config.js:
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入HtmlWebpackPlugin
- module.exports = {
- mode: 'development',
- entry: {
- main: './src/index.js'
- },
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist')
- },
- module: {
- rules: [
- {
- test: /\.(png|svg|jpg|gif$)/, // 文件后缀名匹配通配符
- use: [{
- loader: 'url-loader', // 使用的loader
- options: {
- limit: 10240 // 当图片小于10kb时,使用base64的方式进行打包
- }
- }]
- },
- {
- test: /\.scss$/,
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: {
- importLoaders: 2
- }
- },
- 'sass-loader',
- 'postcss-loader'
- ]
- },
- {
- test: /\.(woff|woff2|eot|ttf)$/,
- use: [
- 'file-loader'
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebpackPlugin({
- filename: 'dist.html', // 将自动生成的html文件的文件名改为dist.html
- template: './src/template.html' // 模板
- })
- ]
- }
现在进行打包操作:
打开dist.html:
可以发现,在HtmlWebpackPlugin自动生成的dist.html文件中果然增加了div元素,它实际上是以src文件夹中的template.html为模板来生成的。
用浏览器打开dist.html:
效果和之前一样!
经过前面的操作,dist文件夹中有多余的文件:
我们可以使用CleanWebpackPlugin来自动帮我们清理dist文件夹中多余的文件。
首先,安装CleanWebpackPlugin:
然后修改webpack.config.js:
webpack.config.js:
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入HtmlWebpackPlugin
- const CleanWebpackPlugin = require('clean-webpack-plugin'); // 导入CleanWebpackPlugin
- module.exports = {
- mode: 'development',
- entry: {
- main: './src/index.js'
- },
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist')
- },
- module: {
- rules: [
- {
- test: /\.(png|svg|jpg|gif$)/, // 文件后缀名匹配通配符
- use: [{
- loader: 'url-loader', // 使用的loader
- options: {
- limit: 10240 // 当图片小于10kb时,使用base64的方式进行打包
- }
- }]
- },
- {
- test: /\.scss$/,
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: {
- importLoaders: 2
- }
- },
- 'sass-loader',
- 'postcss-loader'
- ]
- },
- {
- test: /\.(woff|woff2|eot|ttf)$/,
- use: [
- 'file-loader'
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebpackPlugin({
- filename: 'dist.html', // 将自动生成的html文件的文件名改为dist.html
- template: './src/template.html' // 模板
- }),
- new CleanWebpackPlugin()
- ]
- };
进行打包操作,然后再查看dist文件夹:
多余的文件被清理了!
联系客服