vue.config.js
<code class="language-null">const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
var fs = require('fs');
const CopyPlugin = require('copy-webpack-plugin');
let init_path = process.env.VUE_APP_BUILD_PATH;
let relative_path = init_path;
if (!/^(\.|\/)/.test(init_path)) {
//补齐相对路径
relative_path = `./${init_path}`;
}
if (!/\/$/.test(init_path)) {
//补齐目录斜线
relative_path = `${relative_path}/`;
}
let entry_path = `${relative_path}**/*.html`;
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
let entries = {},
basename,
arr,
tmp,
pathname,
appname;
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
arr = entry.split('/');
tmp = arr.splice(1, arr.length - 2);
pathname = basename; // 正确输出js和html的路径
pagename = basename + '.html';
entries[pathname] = {
entry: tmp.join('/') + '/' + basename + '.js',
template: tmp.join('/') + '/' + pagename,
title: pagename,
filename: pagename
};
});
return entries;
}
let pages = getEntry(entry_path);
let event_id = process.env.EVENT_ID;
let is_production = process.env.NODE_ENV == 'production';
//HTML文件输出路径是对的，资源文件路径是错的
let assetsDir = is_production ? `v2/${event_id}/` : `res_dev/`;
let publicPath = is_production ? '//xxx.com/page/' : '/'
//资源文件路径是对的，HTML文件输出路径是错的
let AddAssetHtmlPluginPath = is_production ? `//xxx.com/page/` : ``;
function getMockDataCb(file){
return function(req, res){
let mockData = JSON.parse(fs.readFileSync(`./mock${file}`, 'utf8'));
res.json(mockData);
}
};
module.exports = {
outputDir: `../htdocs/page/`, //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
assetsDir: assetsDir, //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录； serve和build构建都会生效，所以要区分环境
// indexPath: ``, //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
publicPath: publicPath,
pages,
devServer: {
before(app){
let mockList = glob.sync('./mock/**/*.json').map((item, index) => {
return item.replace(/^\.\/mock/, '');
});
console.log(mockList)
mockList.forEach((file, index) => {
app.get(file, getMockDataCb(file))
});
}
},
chainWebpack: config => {
config.resolve.alias.set('@', path.resolve(__dirname, './'));
},
configureWebpack: config => {
let pluginsPro = [
new webpack.DllReferencePlugin({
// context: process.cwd(),
manifest: require('../htdocs/res/vendor/lib-manifest.json')
})
,new webpack.DllReferencePlugin({
// context: process.cwd(),
manifest: require('../htdocs/res/vendor/global-manifest.json')
})
,// 将 dll 注入到 生成的 html 模板中
// ,new HtmlWebpackPlugin()
new AddAssetHtmlPlugin({
// dll文件位置
filepath: path.resolve(__dirname, '../htdocs/res/vendor/*.js'),
// dll 引用路径
publicPath: AddAssetHtmlPluginPath,
// dll最终输出的目录
outputPath: AddAssetHtmlPluginPath
})
];
let productPlugins = [
new CopyPlugin([
{
// from: `../htdocs/page/v2/${event_id}/**/*`,
from: path.resolve(__dirname, `../htdocs/page/v2/${event_id}`)+'/**/*',
// to: `../htdocs/res/v2/${event_id}/`,
to: path.resolve(__dirname, `../htdocs/res/v2/${event_id}`),
force: true,
toType: 'dir',
transformPath(targetPath, absolutePath) {
return targetPath.replace(`htdocs\\page\\v2\\`, '');
}
}
])
];
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置
pluginsPro = pluginsPro.concat(productPlugins);
} else {
// 为开发环境修改配置
}
config.plugins = [...config.plugins, ...pluginsPro];
}
};
</code>
webpack.dll.conf.js
<code class="language-null">const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// dll文件存放的目录
const dllPath = '../htdocs/res/vendor';
module.exports = {
entry: {
lib: ['vue', 'core-js', 'axios'],
global: ['zepto', '@/global/flexible.js', '@/global/index.js']
},
output: {
path: path.resolve(__dirname, dllPath),
filename: '[name].dll.[contenthash].js',
library: '[name]_dll'
},
resolve: {
alias: {
'@': path.resolve(__dirname, './')
}
},
module: {
rules: [{
test: require.resolve('zepto'),
loader: 'exports-loader?window.Zepto!script-loader'
}]
},
plugins: [
//清除之前的dll文件
new CleanWebpackPlugin(),
//设置环境变量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
//manifest.json描述动态链接库包含了哪些内容
new webpack.DllPlugin({
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
name: '[name]_dll',
context: process.cwd()
})
]
};
</code>