2019-08-14

var path = require('path')
var utils = require('./utils')
var multiPage = require('./multi-page')
var config = require('../config')
var webpack = require('webpack')
const {VueLoaderPlugin} = require('vue-loader');
var appConfig = require('../config/app-config')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

function resolve(dir) {
return path.join(__dirname, '..', dir)
}

module.exports = {
entry: multiPage.getEntryPages(),
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: config.isBuild
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},/
{
test: /.vue/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
{
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this expression is default
envTest: process.env.ENV_CONFIG === 'test', // any name you want, used for / IFTRUE_evnTest ...js code... FITRUE_evnTest /
isPreview: process.env.npm_config_preview, // npm run build-demo --preview, for mock client data
}
},
],
},
{
test: /.(png|jpe?g|gif|svg)(?.)?/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('font/[name].[hash:7].[ext]')
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
ENV_CONFIG: JSON.stringify(process.env.ENV_CONFIG),
}
}),
//生成仅包含颜色的替换样式（主题色等）
new ThemeColorReplacer({
fileName: 'css/theme-colors.[contenthash:8].css',
matchColors: [
...forElementUI.getElementUISeries(appConfig.themeColor), //element-ui主色系列
'#0cdd3a', //自定义颜色
'#c655dd',
],
changeSelector: forElementUI.changeSelector,
isJsUgly: config.isBuild,
// resolveCss(resultCss) { // optional. Resolve result css code as you wish.
// return resultCss + youCssCode
// }
})
],

node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
}

}

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
import appConfig from '../../config/app-config.js'

export let curColor = appConfig.themeColor

// 动态切换主题色
export function changeThemeColor(newColor) {
var options = {
newColors: [...forElementUI.getElementUISeries(newColor), '#ff0000', '#ffff00'],
}
return client.changer.changeColor(options, Promise)
.then(t => {
curColor = newColor
localStorage.setItem('theme_color', curColor)
});
}

export function initThemeColor() {
const savedColor = localStorage.getItem('theme_color')
if (savedColor) {
curColor = savedColor
changeThemeColor(savedColor)
}
}