欧美色就色,国产成人啪午夜精品网站

一、插件介紹

首先，插件（Plugins）的目的在于解決loader無法實(shí)現(xiàn)的其他事。

webpack提供了許多的插件以支持打包時(shí)進(jìn)行更多的操作。另外，除了webpack提供的原生插件，許多第三方插件也使我們的打包更加便捷。

現(xiàn)在我們來看兩個(gè)實(shí)際打包過程中會(huì)經(jīng)常用到的插件：HtmlWebpackPlugin和CleanWebpackPlugin

二、HtmlWebpackPlugin

HtmlWebpackPlugin提供哪些功能呢？概括來說就是它簡(jiǎn)化了HTML文件的創(chuàng)建。

我們先安裝HtmlWebpackPlugin：

webpack-demo/dist/dist.html文件現(xiàn)在是這樣的：

dist.html：

現(xiàn)在將這個(gè)文件刪除??！

同時(shí)修改webpack.config.js：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 導(dǎo)入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                    // 當(dāng)圖片小于10kb時(shí)，使用base64的方式進(jìn)行打包
}
}]
},
{
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還將出口文件名設(shè)置為了bundle.js。

現(xiàn)在進(jìn)行打包操作：

確實(shí)打包出了bundle.js文件，現(xiàn)在再查看dist文件夾：

可以發(fā)現(xiàn)多出來一個(gè)index.html文件，打開看看：

index.html:

index.html文件中自動(dòng)引入了打包的文件bundle.js，原來HtmlWebpackPlugin插件就是幫我們構(gòu)建一個(gè)html文件，且能自動(dòng)引入打包文件！

可是我們?cè)鹊膁ist.html還有一個(gè)div元素，難道要我們自動(dòng)在index.html中添加嗎？

并不用，HtmlWebpackPlugin可以幫我們來做這件事情。

首先，在src文件夾中創(chuàng)建一個(gè)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');  // 導(dǎo)入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                    // 當(dāng)圖片小于10kb時(shí)，使用base64的方式進(jìn)行打包
}
}]
},
{
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',              // 將自動(dòng)生成的html文件的文件名改為dist.html
template: './src/template.html'     // 模板
})
]
}

現(xiàn)在進(jìn)行打包操作：

打開dist.html:

可以發(fā)現(xiàn)，在HtmlWebpackPlugin自動(dòng)生成的dist.html文件中果然增加了div元素，它實(shí)際上是以src文件夾中的template.html為模板來生成的。

用瀏覽器打開dist.html：

效果和之前一樣！

三、CleanWebpackPlugin

經(jīng)過前面的操作，dist文件夾中有多余的文件：

我們可以使用CleanWebpackPlugin來自動(dòng)幫我們清理dist文件夾中多余的文件。

首先，安裝CleanWebpackPlugin:

然后修改webpack.config.js:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 導(dǎo)入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 導(dǎo)入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                    // 當(dāng)圖片小于10kb時(shí)，使用base64的方式進(jìn)行打包
}
}]
},
{
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',              // 將自動(dòng)生成的html文件的文件名改為dist.html
template: './src/template.html'     // 模板
}),
new CleanWebpackPlugin()
]
};

進(jìn)行打包操作，然后再查看dist文件夾：

多余的文件被清理了！

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

一、插件介紹

二、HtmlWebpackPlugin

三、CleanWebpackPlugin

一、插件介紹

三、CleanWebpackPlugin