<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="userBlockApp" class="user-info">
<i class="settings-ribbon settings-icon settings-icon--gray js-ribbon-settings"></i>
<div class="user-info__photo right">
<img src="{{user.Photo}}" alt="">
</div>
<div class="user-info__title right">
<h4 href="#" class="user-title">{{user.Firstname}}<br /> {{user.Lastname}}</h4>
<a href="#" class="user-link">Мой кабинет</a>
</div>
<div class="notifications-widget header__notifications right">
<i class="notifications-widget__icon"></i>
<div class="counter-sm counter-sm--red notifications-widget__count">
8
</div>
</div>
<i class="settings-header__icon"></i>
</div>
<script>
(function (webPartId, initialState) {
new UserBlockWidget({
el: '#userBlockApp',
data: function () {
return {
user: User || {}
}
}
});
})(__WebPartID__, __INITIAL_STATE__);
</script>
const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const baseConfig = require('../webpack.config.base');
const project = __dirname
.split(path.sep)
.pop();
const template = (name) => path.resolve(__dirname, 'L', project, name);
const config = {
entry: {
'userBlock': ['./UserBlock/UserBlock.js', './UserBlock/userblock.less']
},
plugins: [
new HtmlWebpackPlugin({
template: './UserBlock/UserBlock.html',
filename: template('UserBlock.html'),
chunks: ['userBlock'],
inject: 'head'
})
]
};
module.exports = merge(baseConfig(project), config);
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const core = '';
const layouts = (dir, project) => path.resolve(dir, project, 'Layouts', project);
module.exports = function (project) {
return {
devtool: 'eval',
resolve: {
alias: {
'core': layouts(__dirname, core)
}
},
output: {
path: layouts(__dirname, project),
filename: '[name].[hash].js',
publicPath: '/_l/' + project.toLowerCase() + '/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract(['css-loader']),
less: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}
}
},
{
test: /\.(jpe?g|png|gif)$/,
loader: 'file-loader'
}
]
},
externals: {
'jquery': 'jQuery',
'Vue': 'Vue',
'VueRouter': 'VueRouter',
'Vuex': 'Vuex'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new CleanWebpackPlugin([layouts(__dirname, project)], {
watch: true
}),
new ExtractTextPlugin('[name].[contenthash].css')
]
}
};
