module.exports = {
//文件引入路劲
publicPath: process.env.NODE_ENV === 'development'?"":"../../target",
//输出目录
outputDir:'dist/target',
//hrml输出目录
indexPath:'../target.html',
}
如果public目录下，有引入一些第三方的资源直接引用的。需在public的html文件中做如下配置<%= BASE_URL %>
<link href="<%= BASE_URL %>target.css" rel="stylesheet" type="text/css">
CDN引入
// vue.config.js
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// #region 忽略生成环境打包的文件
var externals = {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'echarts': 'echarts'
}
config.externals(externals)
// 在html文件中引入相关CDN
const cdn = {
css: [
// element-ui css
'https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css'
],
js: [
// vue
'https://cdn.xxxxxx/vue.min.js',
// vue-router
'https://cdn.xxxxxx/vue-router.min.js',
// vuex
'https://cdn.xxxxxx/vuex.min.js',
// axios
'https://cdn.xxxxxx/axios.min.js',
// element-ui js
'https://xxxxxx/element-ui/2.13.0/index.js',
//echarts
'https://xxxxxx/echarts/4.6.0/echarts-en.common.js'
]
}
config.plugin('html')
.tap(args => {
args[0].cdn = cdn
return args
})
}
}
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<% if (process.env.NODE_ENV === 'production') { %>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%=css%>" rel="preload" as="style">
<link rel="stylesheet" href="<%=css%>" as="style">
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%=js%>" rel="preload" as="script">
<script src="<%=js%>"></script>
<% } %>
<% } %>
然后需要将之前引入的代码注释 main.js中
最近吧 有两个项目需要合并一下 AB两个项目 A项目是个编辑器 所以有很多地方使用 最近业务有所改动 编辑器就仅属于A了 强依赖没得法 合了之后便于调试便于打包
比较懒所以直接就扔到了src目录 问题应该是有的吧 优化空间也是很大的
// vue.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin")
const pageMethod = require('./util/getPages.js')
module.exports = {
pages: pageMethod.pages(), // 多页面配置
transpileDependencies: ['element-ui'] // element有ES6语法IE不支持么得法让她再打包一次吧
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
},
// 上面的粘过来主要是用于定位
// A项目拿过来了 但是呢static的文件没有打包进去 手动处理一下额 免得报错
plugins: [
new CopyWebpackPlugin([
{ from: './A/static/img', to: "static/img" }
]),
new CopyWebpackPlugin([
{ from: './A/static/guide.pdf', to: "static" }
])
]
},
}
// 随便起的个名字 主要是为了多页面的引用配置 A项目是个多页面
const pageNames = ['A1', 'A2', 'A3']
const pages = {}
module.exports.pages = function () {
pages['index'] = {
entry: `src/main.js`,
template: `public/index.html`,
filename: 'index.html',
}
pageNames.forEach(key => {
pages[key] = {
entry: `A/src/${key}/main.js`,
template: `A/src/${key}/index.html`,
filename: `${key}.html`,
}
})
return pages
}
乍一看没啥大问题 但是呢 还是比较想分包打包吧 那样维护就方便的多 结果现在都弄到根目录了
// 黑色的还是带劲点
// 讲道理 glob 还是很给力的可以读取文件就很方便额 打包之后打包之前都能做一些操作还是挺爽的
// const glob = require('glob')
// 复制目录
glob.sync('./dist/A/*.html').forEach((filepath, name) => {
})
