hookehuyr

add 配置更新

......@@ -24,10 +24,6 @@
<strong>We're sorry but vant-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</html>
......
......@@ -22,10 +22,6 @@
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="login"></div>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</html>
......
......@@ -3,9 +3,14 @@ const path = require('path');
const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// function resolve (dir) {
// return path.join(__dirname, './', dir)
// }
const assetsDir = 'static';
const resolve = dir => path.join(__dirname, dir);
// posix兼容方式处理路径
const posixJoin = _path => path.posix.join(assetsDir, _path);
const lastVersion = new Date().getTime();
const isProd = process.env.NODE_ENV === 'production';
// cdn预加载使用
const externals = {
......@@ -92,7 +97,7 @@ module.exports = {
// 输出文件目录
outputDir: 'dist',
// 放置生成的静态资源的目录
assetsDir: '',
assetsDir,
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
filenameHashing: true,
......@@ -119,9 +124,8 @@ module.exports = {
config.resolve.extensions.push('.less');
config.resolve.extensions.push('.css');
//
config.resolve.alias.src = path.resolve(__dirname, './src/src');
config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
config.resolve.alias.components = path.resolve(__dirname, './src/components');
// config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
// config.resolve.alias.components = path.resolve(__dirname, './src/components');
// 修改webpack config, 使其不打包externals下的资源
if (process.env.NODE_ENV === 'production') {
// 1. 生产环境npm包转CDN
......@@ -143,6 +147,34 @@ module.exports = {
// 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: (config) => {
/**
* 删除懒加载模块的 prefetch preload,降低带宽压力
*/
config.plugins
.delete('prefetch')
.delete('preload');
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'));
// 清除警告
config.performance
.set('hints', false);
// 将版本号写入环境变量
config
.plugin('define')
.tap(args => {
args[0].app_build_version = lastVersion;
return args;
});
config
.when(isProd, config =>
// 生产环境js增加版本号
config.output
.set('filename', posixJoin(`js/${lastVersion}-[name].[chunkhash].js`))
.set('chunkFilename', posixJoin(`js/${lastVersion}-[id].[chunkhash].js`))
);
/**
* 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改
* vue inspect --plugins 查询插件 使用pages会有多个html实例
*/
......@@ -167,7 +199,11 @@ module.exports = {
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
// extract: true,
// 增加版本号
extract: !isProd ? false : {
filename: posixJoin(`css/${lastVersion}-[name].[contenthash:8].css`),
chunkFilename: posixJoin(`css/${lastVersion}-[name].[contenthash:8].css`)
},
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
......@@ -193,7 +229,7 @@ module.exports = {
open: false,
// open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
port: 8180,
https: false,
hotOnly: false,
// 设置代理
......