vue cli3 打包配置
const path = require("path");
const projectname = process.argv[3];
const glob = require("glob");
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 定义压缩文件类型
const productionGzipExtensions = ["js", "css"];
const testEnv = "test-18";
function resolve(dir) {
return path.join(__dirname, dir);
}
// 本地环境是否需要使用cdn
const devNeedCdn = true;
const isProduction = process.env.NODE_ENV === "production";
const cdn = {
// css: [],
js: [
"vue-2.6.11.min.js",
"vue-router-3.0.7.min.js",
"vuex-3.1.2.min.js",
"axios-0.18.1.min.js",
"vue-i18n-8.15.3.min.js",
"moment-2.24.0.min.js"
]
};
// 多入口配置
function getEntry() {
let entries = {};
if (process.env.NODE_ENV == "production") {
entries[projectname] = {
// page的入口
entry: `src/modules/${projectname}/main.js`,
// 模板来源
template: "public/index.html",
// 在 dist/index.html 的输出
filename: "index.html",
// cdn引入npm包
cdn: cdn,
// title: projectname,
chunks: ["chunk-vendors", "chunk-common", projectname]
};
} else {
const items = glob.sync("./src/modules/*/*.js");
for (let i in items) {
const filepath = items[i];
const fileList = filepath.split("/");
const fileName = fileList[fileList.length - 2];
entries[fileName] = {
entry: `src/modules/${fileName}/main.js`,
// 模板来源
template: `public/index.html`,
// 在 dist/index.html 的输出
filename: `${fileName}.html`,
// cdn引入npm包
cdn: devNeedCdn ? cdn : null,
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", fileName]
};
}
}
return entries;
}
const pages = getEntry();
const buildModuleName = {
moduleA: "moduleA",
moduleA: "moduleB"
};
const Timestamp = new Date().getTime();
module.exports = {
productionSourceMap: false, // 生产禁止显示源代码
// 打包输出目录默认dist
outputDir: "dist/" + buildModuleName[projectname],
// outputDir: "institution-onboard-ui/" + projectname,
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// assetsDir: 'bbbbb', // 放置生成的静态资源 默认 ''
pages: pages,
// entry: "src/modules/" + projectname + "/main.js",
configureWebpack: config => {
config.performance = {
hints: "warning",
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith(".js");
}
};
if (isProduction || devNeedCdn) {
// 配置不打包的npm包
config.externals = {
// 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
"vue-i18n": "VueI18n",
axios: "axios",
moment: "moment",
"ant-design-vue": "antd"
};
}
if (isProduction) {
// 为生产环境修改配置...
// 配置打包输入的文件名
config.output.chunkFilename = `js/[name].${Timestamp}.js`;
config.output.filename = `js/[name].${Timestamp}.js`;
// 配置gzip
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
);
} else {
// 为开发环境修改配置...
// console.log("测试-----");
}
},
// 会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: config => {
const svgRule = config.module.rule("svg");
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear();
// 添加要替换的 loader
svgRule
.use("svg-sprite")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
config.module
.rule("images")
.use("url-loader")
.tap(options => {
options.name = `img/[name].${Timestamp}.[ext]`;
options.fallback = {
loader: "file-loader",
options: {
name: `img/[name].${Timestamp}.[ext]`
}
};
return options;
});
config.resolve.alias
.set("@", resolve("src"))
.set("@inst", resolve("src/modules/institution"))
.set("@bkg", resolve("src/modules/brokerage"));
// 移除 prefetch 插件
config.plugins.delete("prefetch");
// 移除 preload 插件
config.plugins.delete("preload");
},
css: {
loaderOptions: {
// antdv 配置主题样式
less: {
modifyVars: {
"primary-color": "#0066ED",
"link-color": "#0066ED",
"border-radius-base": "2px",
"font-size-base": "14px"
},
javascriptEnabled: true
}
},
extract: {
//一种方式，打包后的css 会带时间戳，不改变文件名的。
filename: `css/[name].${Timestamp}.css`,
chunkFilename: `css/[name].${Timestamp}.css`
},
modules: false
},
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
// 配置全局less变量
path.resolve(__dirname, "./src/assets/style/common-constants.less")
],
injector: "append"
},
i18n: {
locale: "zh",
fallbackLocale: "en",
localeDir: "lang",
enableInSFC: true
}
},
devServer: {
proxy: {
"/-/x/api": {
// target: "http://127.0.0.1:8080",
changeOrigin: true
// ws: true,
// pathRewrite: {}
},
}
}
};
