|
|
//这段代码主要用于根据不同的环境（生产环境或开发环境）来配置webpack的入口文件和外部依赖
|
|
|
//（externals）。在生产环境中，通过externals配置来告诉webpack不要将这些指定的库打包到最终的
|
|
|
//bundle中，因为它们将在运行时通过全局变量来访问。同时，它还修改了html-webpack-plugin插件的
|
|
|
//配置，通过添加一个isProd标志来区分当前是生产环境还是开发环境，这可以在生成的HTML文件中被用
|
|
|
//来进行条件渲染或其他逻辑处理。
|
|
|
// 导出webpack配置修改函数
|
|
|
module.exports = {
|
|
|
// 使用chainWebpack来自定义webpack配置
|
|
|
chainWebpack: config => {
|
|
|
// 判断当前是否为生产环境
|
|
|
config.when(process.env.NODE_ENV === 'production', config => {
|
|
|
// 修改入口文件为src/main-prod.js（用于生产环境）
|
|
|
config
|
|
|
.entry('app') // 获取名为'app'的入口配置
|
|
|
.clear() // 清除原有的入口文件
|
|
|
.add('./src/main-prod.js') // 添加新的入口文件
|
|
|
|
|
|
// 设置externals，这些库在打包时将不会被包含，而是作为外部依赖在运行时引入
|
|
|
config.set('externals', {
|
|
|
vue: 'Vue', // Vue库在运行时通过全局变量Vue访问
|
|
|
'vue-router': 'VueRouter', // vue-router库在运行时通过全局变量VueRouter访问
|
|
|
axios: 'axios', // axios库在运行时通过全局变量axios访问
|
|
|
lodash: '_', // lodash库在运行时通过全局变量_访问
|
|
|
echarts: 'echarts', // echarts库在运行时通过全局变量echarts访问
|
|
|
nprogress: 'NProgress', // nprogress库在运行时通过全局变量NProgress访问
|
|
|
'vue-quill-editor': 'VueQuillEditor' // vue-quill-editor库在运行时通过全局变量VueQuillEditor访问
|
|
|
})
|
|
|
|
|
|
// 修改html-webpack-plugin插件的配置，设置isProd标志为true
|
|
|
config.plugin('html').tap(args => {
|
|
|
args[0].isProd = true // 修改html-webpack-plugin的第一个参数对象，添加isProd属性并设为true
|
|
|
return args // 返回修改后的参数数组
|
|
|
})
|
|
|
})
|
|
|
|
|
|
// 判断当前是否为开发环境
|
|
|
config.when(process.env.NODE_ENV === 'development', config => {
|
|
|
// 修改入口文件为src/main-dev.js（用于开发环境）
|
|
|
config
|
|
|
.entry('app') // 获取名为'app'的入口配置
|
|
|
.clear() // 清除原有的入口文件
|
|
|
.add('./src/main-dev.js') // 添加新的入口文件
|
|
|
|
|
|
// 修改html-webpack-plugin插件的配置，设置isProd标志为false
|
|
|
config.plugin('html').tap(args => {
|
|
|
args[0].isProd = false // 修改html-webpack-plugin的第一个参数对象，添加isProd属性并设为false
|
|
|
return args // 返回修改后的参数数组
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
} |
