Diretório de artigos
1. Introdução
Já mencionei antes, e claro que todos devem saber que o Vue3.0 não possui mais a configuração do webpack.config.js; mas é inevitável que tenhamos algumas necessidades especiais para ajustar o webpack durante o desenvolvimento do projeto. Neste momento, em No projeto Vue3.0, precisamos criar vue.config.js no diretório raiz para concluir algumas configurações especiais do webpack. Por padrão, ele será carregado automaticamente por @vue/cli-service.
Neste ponto, você precisa criar o arquivo vue.config.js.
Veja a configuração padrão do webpack
Vue CLI 官方文档：vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令，这个命令只是简单的把 vue-cli-service``inspect 代理到了你的项目中。
Webpack abstraído, é difícil para nós entender algumas de suas configurações padrão, então podemos verificá-lo através de instruções.
Este comando enviará a configuração do webpack para o arquivo output.js, que é conveniente para visualização.
vue inspect > output.js
Arquivo vue.config.js
Este arquivo exporta um objeto que contém opções:
module.exports = { // 选项...}
A seguir, introduza algumas opções e configurações em detalhes:
2. Configuração básica
module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 8090,
host: '0.0.0.0',
https: false,
open: true }, // 其他配置
- productionSourceMap: se deve gerar sourceMap no ambiente de produção
- publicPath: A URL básica ao implantar o pacote de aplicativos, o uso é consistente com o output.publicPath do próprio webpack
- Você pode configurar os ambientes de desenvolvimento e produção por meio de operações ternárias, publicPath:
- process.env.NODE_ENV === 'produção'? '/prod/' : './'
- outputDir: O diretório do arquivo de saída durante a construção
- assetsDir: Coloque o diretório da pasta estática
- devServer: configuração relacionada ao webpack-dev-server no ambiente de desenvolvimento
- port: a porta do tempo de execução de desenvolvimento
- host: Nome de domínio do tempo de execução de desenvolvimento, definido como '0.0.0.0', na mesma LAN, se o seu projeto estiver em execução, você pode acessá-lo através do seu http://ip:port/...
- https: se deve ativar https
- open: se deve abrir o navegador diretamente quando npm run serve
3. Configuração de plug-ins e regras
Se você deseja adicionar/modificar plugins ou regras do webpack em vue.config.js, existem duas maneiras.
O método configureWebpack
configureWebpack é um método relativamente simples
- Pode ser um objeto: é consistente com o método de configuração do próprio webpack, e o objeto será mesclado na configuração final do webpack por webpack-merge
- Também pode ser uma função: modifique a configuração diretamente dentro da função
configureWebpack: {
rules:[],
plugins: []
}
configureWebpack: (config) => {
// 例如，通过判断运行环境，设置mode
config.mode = 'production'
}
modo chainWebpack
operação em cadeia chainWebpack (avançado), vou configurar todas as configurações nesta opção
Em quarto lugar, a configuração das regras
Em relação à configuração das regras, irei apresentá-las a partir da adição/modificação respectivamente.
4.1 Adição de regras
No webpack, regras é um item de configuração do módulo e todas as configurações são montadas na configuração, então adicione um método de regra:
config.module
.rule(name)
.use(name)
.loader(loader)
.options(options)
Caso:
style-resources-loader para adicionar menos variáveis globais;
svg-sprite-loader para carregar imagens SVG no projeto como imagens sprite;
module.exports = {
chainWebpack: (config) => {
// 通过 style-resources-loader 来添加less全局变量
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, './lessVariates.less')]
});
});
// svg-sprite-loader: Carrega a imagem SVG no projeto como uma imagem Sprite
config.module
.rule('svg')
.test(/.svg$/) // 匹配svg文件
.include.add(resolve('src/svg')) // 主要匹配src/svg
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
// 使用的loader，主要要npm该插件
.options({
symbolId: 'svg-[name]'}) // 参数配置
}
}
4.2 Modificação de regras
Para uma regra existente, se você precisar modificar seus parâmetros, poderá usar o método tap:
config.module
.rule(name)
.use(name)
.tap(options => newOptions)
Caso:
Modifique os parâmetros do url-loader;
module.exports = {
chainWebpack: (config) => {
// `url-loader`是webpack默认已经配置的，现在我们来修改它的参数
config.module.rule('images')
.use('url-loader')
.tap(options => ({
name: './assets/images/[name].[ext]',
quality: 85,
limit: 0,
esModule: false,
}))
}
}
5. Configuração de plug-ins
Em relação à configuração dos plugins, irei apresentá-los como adicionar/modificar/excluir respectivamente.
5.1 Adição de plug-ins
Nota: Aqui o WebpackPlugin não precisa ser usado através do novo WebpackPlugin().
config .plugin(name) .use(WebpackPlugin, args)
Caso:
Adicionar hot-hash-webpack-plugin;
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
module.exports = {
chainWebpack: (config) => {
// 新增一个`hot-hash-webpack-plugin`
// 注意：这里use的时候不需要使用`new HotHashWebpackPlugin()`
config.plugin('hotHash')
.use(HotHashWebpackPlugin, [{
version: '1.0.0' }]);
}
}
5.2 Modificação de plugins
Da mesma forma, os parâmetros do plugin também são modificados através do tap.
config
.plugin(name)
.tap(args => newArgs)
Caso:
Modifique o nome do arquivo e o diretório após a extração do CSS após o empacotamento;
exclua o console e o depurador;
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
module.exports = {
chainWebpack: (config) => {
// 修改打包时css抽离后的filename及抽离所属目录
config.plugin('extract-css')
.tap(args => [{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}])
// 正式环境下，删除console和debugger
config.optimization
.minimize(true)
.minimizer('terser')
.tap(args => {
let {
terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
}
}
5.3 Exclusão de plug-ins
Para alguns plug-ins padrão do webpack, você pode excluí-los se não forem necessários.
config.plugins.delete(name)
Caso:
Exclua a segmentação e extração automática do módulo vue-cli3.X
module.exports = {
chainWebpack: (config) => {
// vue-cli3.X 会自动进行模块分割抽离，如果不需要进行分割,可以手动删除
config.optimization.delete('splitChunks');
}
}
6. Algumas configurações comuns
6.1 Modificar entrada de arquivo
A entrada padrão para webpack é scr/main.ts
config.entryPoints.clear();
//Limpa a entrada padrão
config.entry('test').add(getPath('./test/main.ts'));
//reiniciar
6.2 DefinirPlugin
Defina variáveis globais globais. DefinePlugin é configurado pelo webpack por padrão. Podemos modificar os parâmetros.
config.plugin('define').tap(args => [{
...args,
"window.isDefine": JSON.stringify(true),
}]);
6.3 Personalizar nome do arquivo e chunkFilename
Personalize o caminho e o nome do arquivo js empacotado
config.output.filename('./js/[name].[chunkhash:8].js');
config.output.chunkFilename('./js/[name].[chunkhash:8].js');
6.4 Modificar parâmetros do plugin html-webpack-plugin
html-webpack-plugin é configurado pelo webpack por padrão. O arquivo de modelo de origem padrão é public/index.html; podemos modificar seus parâmetros.
config.plugin('html')
.tap(options => [{
template: '../../index.html' // 修改源模版文件
title: 'test',
}]);
6.5 Definir alias alias
Por padrão, o webpack define o alias de src como @. Além disso, podemos adicionar
config.resolve.alias
.set('@', resolve('src'))
.set('api', resolve('src/apis'))
.set('common', resolve('src/common'))
7. Anexe uma configuração de vue.config.js
const path = require('path');
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin');
const WebpackBar = require('webpackbar');
const resolve = (dir) => path.join(__dirname, '.', dir);
module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 9999,
host: '0.0.0.0',
https: false,
open: true
},
chainWebpack: (config) => {
const types = ['vue-modules',
'vue', 'normal-modules', 'normal'];
types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, './lessVariates.less')]
});
});
config.resolve.alias
.set('@', resolve('src'))
.set('api', resolve('src/apis'))
.set('common', resolve('src/common'))
config.module.rule('images').use('url-loader')
.tap(options => ({
name: './assets/images/[name].[ext]',
quality: 85,
limit: 0,
esModule: false,
}));
config.module.rule('svg')
.test(/.svg$/)
.include.add(resolve('src/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader');
config.plugin('define').tap(args => [{
...args,
"window.isDefine": JSON.stringify(true)
}]); // 生产环境配置
if (process.env.NODE_ENV === 'production') {
config.output.filename('./js/[name].[chunkhash:8].js');
config.output.chunkFilename('./js/[name].[chunkhash:8].js');
config.plugin('extract-css').tap(args => [{
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}]);
config.plugin('hotHash').use(HotHashWebpackPlugin, [{
version : '1.0.0'}]);
config.plugin('webpackBar').use(WebpackBar);
config.optimization.minimize(true)
.minimizer('terser')
.tap(args => {
let {
terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
config.optimization.splitChunks({
cacheGroups: {
common: {
name: 'common',
chunks: 'all',
minSize: 1,
minChunks: 2,
priority: 1
},
vendor:
name: 'chunk-libs',
chunks: 'all',
test: /[\/]node_modules[\/]/,
priority: 10
}
}
});
}
}
};