1.header中需要添加的 <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <% } %>
2.body中需要添加的 <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <% } %>
const path = require('path'); const webpack = require('webpack') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin') // 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' // 是使用cdn const needCdn = true // 是否压缩文件 const isZip = true // cdn链接 const cdn = { // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称) externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-plus': 'ElementPlus' }, // cdn的css链接 css: [ 'http://xbpark.foxcube.cn/desktop/cs/index.css' ], // cdn的js链接 js: [ 'http://xbpark.foxcube.cn/desktop/js/vue.global.js', 'http://xbpark.foxcube.cn/desktop/js/vue-router.global.js', 'http://xbpark.foxcube.cn/desktop/js/axios.min.js', 'http://xbpark.foxcube.cn/desktop/js/vuex.global.js', 'http://xbpark.foxcube.cn/desktop/js/element-plus.js' ] } module.exports = { // 公共路径 publicPath: './', // 不同的环境打不同包名 outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 一次配置,全局使用,这个scss 因为每个文件都要引入 css: { // 一次配置,全局使用,这个scss 因为每个文件都要引入 loaderOptions: { //引入sass时用到 sass: { // data: `@import "./src/assets/hotcss/px2rem.scss";` } } }, //此处引入第三方插件 pluginOptions: { /** * 引入style-resources-loader插件 * less引入与sass引入方法不一样 * 需要style-resources-loader 和 vue-cli-plugin-style-resources-loader两个插件才能引入成功 * 注意这里引入less文件时不能用别名引入 */ // 'style-resources-loader': { // preProcessor: 'less', // patterns: [ // path.resolve(__dirname, './src/assets/public.less'), // ], // }, }, //打包时是否产生map文件 productionSourceMap: false, //对内部的 webpack 配置进行更细致的修改 chainWebpack: config => { //在路由中用懒加载时,webpack默认有预加载此设置是关闭预加载 config.plugins.delete('preload') config.plugins.delete('prefetch') //压缩图片 config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) // .use('url-loader') // .loader('url-loader') .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() // 设置别名 config.resolve.alias .set('@', path.resolve(__dirname, './src')) // .set('assets', path.resolve(__dirname, './src/views')) // .set('@I', path.resolve(__dirname, './src/assets/image')) // .set('@F', path.resolve(__dirname, './src/shujudata/public.js')) // .set('@H', path.resolve(__dirname, './src/shujudata/https.js')) // .set('@R', path.resolve(__dirname, './src/router')) // .set('@S', path.resolve(__dirname, './src/store')) // .set('@C', path.resolve(__dirname, './src/components/comm')) // .set('@U', path.resolve(__dirname, './src/shujudata/severUrl.js')) // 生产环境或本地需要cdn时,才注入cdn config.plugin('html').tap(args => { if (needCdn) args[0].cdn = cdn return args }) }, // 关闭eslint lintOnSave: false, // 配置服务器(开发环前端解决跨域:此项目没有用到服务代理) devServer: { proxy: { '/api': { target: 'http://xxpark.foxcube.cn:8100/', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } }, // 覆盖webpack默认配置的都在这里 configureWebpack: config => { //引入jQuery // config.plugins.push( // new webpack.ProvidePlugin({ // $: "jquery", // jQuery: "jquery", // "windows.jQuery": "jquery" // }) // ) // 用cdn方式引入,则构建时要忽略相关资源 if (needCdn) config.externals = cdn.externals // 生产环境相关配置 if (isProduction && isZip) { // gzip压缩 const productionGzipExtensions = ['html', 'js', 'css'] config.plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + productionGzipExtensions.join('|') + ')$' ), threshold: 10240, // 只有大小大于该值的资源会被处理 1240 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false // 删除原文件 }) ) } // 公共代码抽离(抽离公共代码后路由的懒加载将不起作用。如果要用懒加载则不添加一下代码) config.optimization = { minimize:true,// 开启压缩js代码(默认true) splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 6, maxInitialRequests: 4, automaticNameDelimiter: '~', cacheGroups: { // vue: { // name: "vue", // test: /[\\/]node_modules[\\/]vue[\\/]/, // test: /[\\/]node_modules[\\/]vue[\\/]/, // priority: -10 // }, // vuex: { // name: 'vuex', // test: /[\\/]node_modules[\\/]vuex[\\/]/, // priority: -10 // }, // 'vue-router': { // name: 'vue-router', // test: /[\\/]node_modules[\\/]vue-router[\\/]/, // priority: -10 // }, elementPlus: { name: 'element-plus', test: /[\\/]node_modules[\\/]element-plus[\\/]/, priority: -10 }, // 'libs-common-utils': { // name: 'libs-common-utils', // test: /[\\\/]node_modules[\\\/]libs-common-utils[\\\/]/, // priority: -10 // }, vendors: { test: /[\\\/]node_modules[\\\/]/, priority: -20 }, } } // splitChunks:{ // chunks: 'all', // minSize: 10000, // 允许新拆出 chunk 的最小体积,也是异步 chunk 公共模块的强制拆分体积 // maxAsyncRequests: Infinity, // 每个异步加载模块最多能被拆分的数量 // maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量 // enforceSizeThreshold: 20000, // 强制执行拆分的体积阈值并忽略其他限制 // cacheGroups: { // assets: { // // assetsImgSvg 单独拆包 // name: 'chunk-assets', // test: /[\\/]src[\\/]assets/, // priority: 20, // 权重 // chunks: 'all' // 只打包按需引入的模块 // }, // components: { // // components 单独拆包 // name: 'chunk-components', // test: /[\\/]src[\\/]components/, // priority: 20, // 权重 // chunks: 'all' // 只打包按需引入的模块 // }, // // pdfJS: { // // // pdfJS 单独拆包 // // name: 'chunk-pdfJS', // // test: /[\\/]node_modules[\\/]_pdfjs-dist/, // // priority: 20, // 权重要大于 libs // // chunks: 'all' // 只打包按需引入的模块 // // }, // // ylz: { // // // components 单独拆包 // // name: 'chunk-ylz', // // test: /[\\/]node_modules[\\/]@ylz/, // // priority: 20, // 权重要大于 libs // // chunks: 'all' // 只打包按需引入的模块 // // }, // // vconsole: { // // // vconsole 单独拆包 // // name: 'chunk-vconsole', // // test: /[\\/]node_modules[\\/]vconsole/, // // priority: 20, // 权重要大于 libs // // chunks: 'all' // 只打包按需引入的模块 // // }, // libs: { // // 第三方库 // name: 'chunk-libs', // test: /node_modules/, // priority: 10 // // chunks: "initial" // 只打包初始时依赖的第三方 // }, // commons: { // // 公共模块包 // name: 'chunk-commons', // minChunks: 2, // priority: 0, // reuseExistingChunk: true // } // } // } } return { plugins:[ new BundleAnalyzerPlugin() ] } }, }