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': 'vue/dist/vue.esm.js', '@': resolve('src') } }, module: { rules: [ /*{ test: /\.(js|vue)/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},/
{
test: /.vue/, loader: 'vue-loader', options: {} }, { test: /\.js/,
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('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?/,
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

// 動(dòng)態(tài)切換主題色
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)
}
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容