Prefácio
Intenção original: compartilhar algumas coisas úteis no trabalho Plugin, espero que ajude a todos, não borrife se não gostar.
html-webpack-plugin
Objetivo: compactar um modelo de página no diretório dist e, por padrão, ele importará js ou css automaticamente
instalação
cnpm i html-webpack-plugin@3.2.0 -D
Configuração
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 以咱们本地的index.html文件为基础模板
filename: "index.html", // 输出到dist目录下的文件名称
}),
]
}
HtmlWebpackPluginReceba um objeto, configure-o você mesmo, veja aqui os detalhes
clean-webpack-plugin
Objetivo: usado para excluir todos os diretórios dist do pacote
instalação
cnpm i clean-webpack-plugin -D
Configuração
webpack.config.js
const {
CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
extract-text-webpack-plugin
Objetivo: Extrair o cssestilo do jsarquivo e finalmente sintetizar um cssarquivo. O plug-in suporta apenas a webpack4versão anterior. Se você estiver na webpack4versão ou acima dela, um erro será relatado.
instalação
cnpm i extract-text-webpack-plugin -D
Configuração
webpack.config.js
const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new extractTextPlugin({
filename: "[name].css",
allChunks: true
})
]
}
Na configuração acima, os extractTextPlugin.extractparâmetros internos fallbacksão executados quando a extração não é bem-sucedida style-loader. useQue é usado para extrair css-loadera conversão, pluginscuja configuração filenameé finalmente finalizada mesclando .csso nome do arquivo, quando allChunksé falsea hora, apenas ao extrair o cssarquivo de inicialização para extrações truequando cssarquivo assíncrono .
mini-css-extract-plugin
Objetivo: O plug-in é exract-text-webpack-pluginigual ao anterior , extrai o estilo css, a única diferença é o uso, webpack4é recomendado usá-lo após a versão do plug-in
instalação
cnpm i mini-css-extract-plugin -D
Configuração
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[name].css"
})
]
}
Na configuração acima, você pode ver o uso e a exract-text-webpack-plugindiferença, vamos dar uma olhada na diferença.
loaderSem configuraçãofallback- Ao
plugindefinirfilenameo carregamento de sincronização do nome do recurso, especifique também o carregamento assíncronocssde recursoschunkFilename - O plug-in suporta configuração
publicPathpara definircsso caminho de carregamento assíncrono exract-text-webpack-pluginApenas um arquivo css será extraído emini-css-extract-pluginserá extraído com base no arquivo assíncrono.
webpack.optimize.CommonsChunkPlugin
Objetivo: Utilizado para extrair o código comum na página, de forma a otimizar a velocidade de carregamento, este CommonsChunkPluginsuporta apenas o Webpack4anterior.
instalação
该插件是Webpack内置的，不需要安装。
Configuração
main.js
import Vue from "vue"
webpack.config.js
module.exports = {
entry: {
main: "./main.js",
vendor: ["Vue"]
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "[name].js"
}),
new Webpack.optimize.CommonsChunkPlugin({
name: "common",
chunks: ["vendor"],
filename: "[name].js"
})
]
}
Na configuração acima, extraímos e otimizamos main.jsos arquivos dependentes contidos Vue.jsnele para evitar o carregamento desse jsarquivo toda vez que você empacota ou visita outras páginas . Primeiramente, Vueextraímos o ambiente básico, porque o ambiente básico dificilmente mudará, de modo que a otimização da extração é necessária. Em seguida, Webpackextraia o código de tempo de execução, para que vendorele não mude se você empacotá-lo novamente, você pode usar o cache do navegador
otimização.SplitChunks
Objetivo: esta função é a webpack.optimize.CommonsChunkPluginmesma acima , mas optimization.SplitChunksé webpack4recomendado para uso posterior
instalação
内置的，不需要安装。
Configuração
main.js
import Vue from "vue"
console.log(Vue)
import("./news")
news.js
import Vue from "vue"
console.log(Vue)
webpack.config.js
module.exports = {
mode: "development",
entry: {
main: "./main.js"
},
output: {
filename: "[name].js",
path: __dirname + "/dist"
},
optimization: {
splitChunks: {
chunks: "all"
}
},
}
Na configuração acima, splitChunkso chunksas allis all chunktêm efeito por padrão apenas asyncválido assíncrono.
splitChunksTambém há extração automática por padrão, e os requisitos padrão são os seguintes:
- Os módulos extraídos são do
node_modulecatálogo - O módulo é maior que 30kb
- Ao carregar sob demanda, o recurso máximo solicitado é menor ou igual a 5
- O número máximo de solicitações paralelas no primeiro carregamento é menor ou igual a 3
DefinePlugin
Objetivo: Usado para injetar variáveis globais, geralmente usadas em variáveis de ambiente.
instalação
无需安装，webpack内置
Configuração
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.DefinePlugin({
STR: JSON.stringify("蛙人"),
"process.env": JSON.stringify("dev"),
name: "蛙人"
})
]
}
Na configuração acima, DefinePluginum objeto é recebido, e o keyvalor dentro corresponde a um valuevalor. Este valuevalor é um snippet de código. Você pode ver o acima name, e um erro será relatado 蛙人 is not defined. Observe aqui que o valuevalor deve ser uma variável ou um trecho de código .
ProvidePlugin
Objetivo: Utilizado para definir variáveis globais, como importar 100 páginas, importar vuecada página só aumentará a carga de trabalho, basta webpackProvidemontar uma variável diretamente , sem necessidade de importar uma por uma.
instalação
无需安装，webpack内置
Configuração
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.ProvidePlugin({
"Vue": ["vue", "default"]
})
]
}
Na configuração acima, ProvidePluginum objeto keyé recebido, o valor é a variável usada, o valueprimeiro parâmetro do valor é o Vuemódulo e o segundo parâmetro é o Es Module.defaultatributo padrão . importO padrão é a introdução de um Es Moduleobjeto próximo , que tem defaultesta propriedade é o objeto de entidade
plug-in-substituto-módulo-quente
Objetivo: abrir atualização de módulo quente
instalação
无需安装，webpack内置
Configuração
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.HotModuleReplacementPlugin()
]
}
IgnorePlugin
Objetivo: Usado para filtrar arquivos empacotados e reduzir o tamanho dos arquivos empacotados.
instalação
无需安装，webpack内置
Configuração
webpack.config.js
const Webpack = require("webpack")
module.exports = {
plugins: [
new Webpack.IgnorePlugin(/.\/lib/, /element-ui/)
]
}
uglifyjs-webpack-plugin
Objetivo: Utilizado para compactar jsarquivos, visando webpack4versões e superiores.
instalação
cnpm install uglifyjs-webpack-plugin -D
Configuração
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
exclude: /node_modules/
})
]
}
}
copy-webpack-plugin
Objetivo: usado para copiar arquivos para um diretório
instalação
cnpm i copy-webpack-plugin@6.4.1 -D
Configuração
webpack.config.js
const CopyWebpackPlugin=require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "./main.js",
to: __dirname + "/dist/js",
toType: "dir"
}
]
})
]
}
Na configuração acima, será main.jscopiado para o distdiretório js, o toTypepadrão filepode ser definido como dir, porque meu catálogo de distdiretório não js.
Optimize-css-assets-webpack-plugin
Objetivo: usado para compactar o estilo css
instalação
cnpm i optimize-css-assets-webpack-plugin -D
Configuração
webpack.config.js
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
plugins: [
new OptimizeCssAssetsWebpackPlugin(),
]
}
imagemin-webpack-plugin
Objetivo: usado para compactar imagens
instalação
cnpm i imagemin-webpack-plugin -D
Configuração
webpack.config.js
const ImageminPlugin = require('imagemin-webpack-plugin').default
module.exports = {
plugins: [
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i
})
]
}
friendly-errors-webpack-plugin
Objetivo: embelezar o console, para solicitar erros também. Não queremos que nosso terminal inicie bagunçado, como este
instalação
cnpm i friendly-errors-webpack-plugin -D
Configuração
webpack.config.js
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const devServer = {
publicPath: "/",
port: 9527,
host: "localhost",
open: true,
hotOnly: true,
stats: 'errors-only'
}
module.exports = {
plugins: [
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
notes: ['蛙人你好，系统正运行在http://localhost:' + devServer.port]
},
clearConsole: true,
})
],
devServer
}
Depois de executar o código acima. Veja os seguintes resultados
obrigado
Obrigado por ler este artigo. Espero que seja útil para você. Se você tiver alguma dúvida, corrija-me.
Eu sou um homem-rã (✿◡‿◡), se você acha que está tudo bem, por favor, goste ❤.
Escrever não é fácil, "Curtir" + "Assistir" + "Repetir" Obrigado pelo seu apoio❤
Bons artigos no passado
"Ensina como escrever um componente Vue para publicar no npm e pode ser usado fora da cadeia"
"Compartilhe 12 carregadores comumente usados no Webpack"
"Fale sobre o que são CommonJs e Es Module e suas diferenças"
"Mapa que facilita a compreensão da estrutura de dados"
"Você conhece todas as dicas de JavaScript usadas nesses trabalhos?" 》