Showing
3 changed files
with
45 additions
and
17 deletions
| ... | @@ -24,10 +24,6 @@ | ... | @@ -24,10 +24,6 @@ |
| 24 | <strong>We're sorry but vant-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | 24 | <strong>We're sorry but vant-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
| 25 | </noscript> | 25 | </noscript> |
| 26 | <div id="app"></div> | 26 | <div id="app"></div> |
| 27 | - <!-- 使用CDN加速的JS文件,配置在vue.config.js下 --> | ||
| 28 | - <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> | ||
| 29 | - <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> | ||
| 30 | - <% } %> | ||
| 31 | <!-- built files will be auto injected --> | 27 | <!-- built files will be auto injected --> |
| 32 | </body> | 28 | </body> |
| 33 | </html> | 29 | </html> | ... | ... |
| ... | @@ -22,10 +22,6 @@ | ... | @@ -22,10 +22,6 @@ |
| 22 | <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | 22 | <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
| 23 | </noscript> | 23 | </noscript> |
| 24 | <div id="login"></div> | 24 | <div id="login"></div> |
| 25 | - <!-- 使用CDN加速的JS文件,配置在vue.config.js下 --> | ||
| 26 | - <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> | ||
| 27 | - <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> | ||
| 28 | - <% } %> | ||
| 29 | <!-- built files will be auto injected --> | 25 | <!-- built files will be auto injected --> |
| 30 | </body> | 26 | </body> |
| 31 | </html> | 27 | </html> | ... | ... |
| ... | @@ -3,9 +3,14 @@ const path = require('path'); | ... | @@ -3,9 +3,14 @@ const path = require('path'); |
| 3 | const webpack = require('webpack'); | 3 | const webpack = require('webpack'); |
| 4 | const CompressionWebpackPlugin = require('compression-webpack-plugin'); | 4 | const CompressionWebpackPlugin = require('compression-webpack-plugin'); |
| 5 | 5 | ||
| 6 | -// function resolve (dir) { | 6 | +const assetsDir = 'static'; |
| 7 | -// return path.join(__dirname, './', dir) | 7 | +const resolve = dir => path.join(__dirname, dir); |
| 8 | -// } | 8 | + |
| 9 | +// posix兼容方式处理路径 | ||
| 10 | +const posixJoin = _path => path.posix.join(assetsDir, _path); | ||
| 11 | + | ||
| 12 | +const lastVersion = new Date().getTime(); | ||
| 13 | +const isProd = process.env.NODE_ENV === 'production'; | ||
| 9 | 14 | ||
| 10 | // cdn预加载使用 | 15 | // cdn预加载使用 |
| 11 | const externals = { | 16 | const externals = { |
| ... | @@ -92,7 +97,7 @@ module.exports = { | ... | @@ -92,7 +97,7 @@ module.exports = { |
| 92 | // 输出文件目录 | 97 | // 输出文件目录 |
| 93 | outputDir: 'dist', | 98 | outputDir: 'dist', |
| 94 | // 放置生成的静态资源的目录 | 99 | // 放置生成的静态资源的目录 |
| 95 | - assetsDir: '', | 100 | + assetsDir, |
| 96 | // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 | 101 | // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 |
| 97 | indexPath: 'index.html', | 102 | indexPath: 'index.html', |
| 98 | filenameHashing: true, | 103 | filenameHashing: true, |
| ... | @@ -119,9 +124,8 @@ module.exports = { | ... | @@ -119,9 +124,8 @@ module.exports = { |
| 119 | config.resolve.extensions.push('.less'); | 124 | config.resolve.extensions.push('.less'); |
| 120 | config.resolve.extensions.push('.css'); | 125 | config.resolve.extensions.push('.css'); |
| 121 | // | 126 | // |
| 122 | - config.resolve.alias.src = path.resolve(__dirname, './src/src'); | 127 | + // config.resolve.alias.assets = path.resolve(__dirname, './src/assets'); |
| 123 | - config.resolve.alias.assets = path.resolve(__dirname, './src/assets'); | 128 | + // config.resolve.alias.components = path.resolve(__dirname, './src/components'); |
| 124 | - config.resolve.alias.components = path.resolve(__dirname, './src/components'); | ||
| 125 | // 修改webpack config, 使其不打包externals下的资源 | 129 | // 修改webpack config, 使其不打包externals下的资源 |
| 126 | if (process.env.NODE_ENV === 'production') { | 130 | if (process.env.NODE_ENV === 'production') { |
| 127 | // 1. 生产环境npm包转CDN | 131 | // 1. 生产环境npm包转CDN |
| ... | @@ -143,6 +147,34 @@ module.exports = { | ... | @@ -143,6 +147,34 @@ module.exports = { |
| 143 | // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 | 147 | // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 |
| 144 | chainWebpack: (config) => { | 148 | chainWebpack: (config) => { |
| 145 | /** | 149 | /** |
| 150 | + * 删除懒加载模块的 prefetch preload,降低带宽压力 | ||
| 151 | + */ | ||
| 152 | + config.plugins | ||
| 153 | + .delete('prefetch') | ||
| 154 | + .delete('preload'); | ||
| 155 | + config.resolve.alias | ||
| 156 | + .set('vue$', 'vue/dist/vue.esm.js') | ||
| 157 | + .set('@', resolve('src')) | ||
| 158 | + .set('assets', resolve('src/assets')) | ||
| 159 | + .set('components', resolve('src/components')); | ||
| 160 | + // 清除警告 | ||
| 161 | + config.performance | ||
| 162 | + .set('hints', false); | ||
| 163 | + // 将版本号写入环境变量 | ||
| 164 | + config | ||
| 165 | + .plugin('define') | ||
| 166 | + .tap(args => { | ||
| 167 | + args[0].app_build_version = lastVersion; | ||
| 168 | + return args; | ||
| 169 | + }); | ||
| 170 | + config | ||
| 171 | + .when(isProd, config => | ||
| 172 | + // 生产环境js增加版本号 | ||
| 173 | + config.output | ||
| 174 | + .set('filename', posixJoin(`js/${lastVersion}-[name].[chunkhash].js`)) | ||
| 175 | + .set('chunkFilename', posixJoin(`js/${lastVersion}-[id].[chunkhash].js`)) | ||
| 176 | + ); | ||
| 177 | + /** | ||
| 146 | * 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改 | 178 | * 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改 |
| 147 | * vue inspect --plugins 查询插件 使用pages会有多个html实例 | 179 | * vue inspect --plugins 查询插件 使用pages会有多个html实例 |
| 148 | */ | 180 | */ |
| ... | @@ -167,7 +199,11 @@ module.exports = { | ... | @@ -167,7 +199,11 @@ module.exports = { |
| 167 | // css相关配置 | 199 | // css相关配置 |
| 168 | css: { | 200 | css: { |
| 169 | // 是否使用css分离插件 ExtractTextPlugin | 201 | // 是否使用css分离插件 ExtractTextPlugin |
| 170 | - // extract: true, | 202 | + // 增加版本号 |
| 203 | + extract: !isProd ? false : { | ||
| 204 | + filename: posixJoin(`css/${lastVersion}-[name].[contenthash:8].css`), | ||
| 205 | + chunkFilename: posixJoin(`css/${lastVersion}-[name].[contenthash:8].css`) | ||
| 206 | + }, | ||
| 171 | // 开启 CSS source maps? | 207 | // 开启 CSS source maps? |
| 172 | sourceMap: false, | 208 | sourceMap: false, |
| 173 | // css预设器配置项 | 209 | // css预设器配置项 |
| ... | @@ -193,7 +229,7 @@ module.exports = { | ... | @@ -193,7 +229,7 @@ module.exports = { |
| 193 | open: false, | 229 | open: false, |
| 194 | // open: process.platform === 'darwin', | 230 | // open: process.platform === 'darwin', |
| 195 | host: '0.0.0.0', | 231 | host: '0.0.0.0', |
| 196 | - port: 8080, | 232 | + port: 8180, |
| 197 | https: false, | 233 | https: false, |
| 198 | hotOnly: false, | 234 | hotOnly: false, |
| 199 | // 设置代理 | 235 | // 设置代理 | ... | ... |
-
Please register or login to post a comment