Manual: https://webpack.js.org/configuration/devtool/#devtool
Tabla de contenido
prefacio
vue.config.js es un archivo de configuración de scaffolding opcional que actualizará los elementos de configuración correspondientes en webpack.config.js
Una vez completada la modificación, debe volver a ejecutar npm run serve
Configuración de la función auxiliar de defineConfig
const {
defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
});
Ejemplo de configuración:
const {
defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true, // 是否将所有文件都编译一遍(通过 babel 编译文件:ES6+ → ES5)
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
});
configureWebpack y configuración de chainWebpack
- ConfigureWebpack
操作对象
para modificar la configuración predeterminada del paquete web - chainWebpack pasa
链式编程的形式
, para modificar la configuración predeterminada del paquete web
(1) formulario de objeto configureWebpack
configureWebpack:{
resolve: {
// 别名配置
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'configs': '@/configs',
'views': '@/views',
'plugins': '@/plugins',
}
}
}
(2) formulario de función configureWebpack
configureWebpack:(config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
// 开发生产共同配置别名
Object.assign(config.resolve, {
alias: {
'@': path.resolve(__dirname, './src'),
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common'),
'components': path.resolve(__dirname, './src/components'),
'network': path.resolve(__dirname, './src/network'),
'configs': path.resolve(__dirname, './src/configs'),
'views': path.resolve(__dirname, './src/views'),
'plugins': path.resolve(__dirname, './src/plugins'),
}
})
}