av/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add css extraction

Browse Source
This commit is contained in:
Anton Vakhrushev
2018-06-24 12:26:41 +03:00
parent 9125f92432
commit 3e81397fe1
7 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -6283,6 +6283,16 @@
"integrity": "sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4=", "integrity": "sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4=",
"dev": true "dev": true
}, },
"mini-css-extract-plugin": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
"integrity": "sha512-2Zik6PhUZ/MbiboG6SDS9UTPL4XXy4qnyGjSdCIWRrr8xb6PwLtHE+AYOjkXJWdF0OG8vo/yrJ8CgS5WbMpzIg==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"webpack-sources": "^1.1.0"
}
},
"minimalistic-assert": { "minimalistic-assert": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

1
package.json
View File

@@ -10,6 +10,7 @@
"babel-loader": "^7.1.4", "babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",
"css-loader": "^0.28.11", "css-loader": "^0.28.11",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0", "node-sass": "^4.9.0",
"postcss-loader": "^2.1.5", "postcss-loader": "^2.1.5",
"predictor": "git+https://github.com/anwinged/predictor.git", "predictor": "git+https://github.com/anwinged/predictor.git",

11
source/_layouts/default.html.twig
View File

@@ -2,7 +2,8 @@
<html> <html>
<head> <head>
{% include 'head.twig' %} {% include 'head.twig' %}
</head> <link rel="stylesheet" href="/static/layout_default.css?v={{ date().timestamp }}"></head>
{% block css %}{% endblock %}
<body> <body>
<main class="content"> <main class="content">
@@ -11,11 +12,7 @@
{% include 'counters.twig' %} {% include 'counters.twig' %}
<script src="/static/layout_default.js?v={{ date().timestamp }}"></script> <script async src="/static/layout_default.js?v={{ date().timestamp }}"></script>
{% block js %}{% endblock %}
{% block js %}
{# extra js scripts here #}
{% endblock %}
</body> </body>
</html> </html>

10
source/_layouts/internal.html.twig
View File

@@ -2,6 +2,8 @@
<html> <html>
<head> <head>
{% include 'head.twig' %} {% include 'head.twig' %}
<link rel="stylesheet" href="/static/layout_internal.css?v={{ date().timestamp }}">
{% block css %}{% endblock %}
</head> </head>
<body> <body>
@@ -17,11 +19,7 @@
{% include 'counters.twig' %} {% include 'counters.twig' %}
<script src="/static/layout_internal.js?v={{ date().timestamp }}"></script> <script async src="/static/layout_internal.js?v={{ date().timestamp }}"></script>
{% block js %}{% endblock %}
{% block js %}
{# extra js scripts here #}
{% endblock %}
</body> </body>
</html> </html>

8
source/about/me.html.twig
View File

@@ -5,11 +5,13 @@ description: Несколько фактов об авторе
--- ---
{% block js %} {% block js %}
<script src="/static/about_me.js?v={{ date().timestamp }}"></script> <script async src="/static/about_me.js?v={{ date().timestamp }}"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="/static/about_me.css?v={{ date().timestamp }}">
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div id="app"></div> <div id="app"></div>
{% endblock %} {% endblock %}

6
source/projects/predictor/index.html.twig
View File

@@ -5,7 +5,11 @@ description: Демо-версия электронной гадалки Шен
--- ---
{% block js %} {% block js %}
<script src="/static/predictor.js?v={{ date().timestamp }}"></script> <script async src="/static/predictor.js?v={{ date().timestamp }}"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="/static/predictor.css?v={{ date().timestamp }}">
{% endblock %} {% endblock %}
{% block content %} {% block content %}

31
webpack.config.js
View File

@@ -1,6 +1,7 @@
const path = require('path'); const path = require('path');
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env = {}) => { module.exports = (env = {}) => {
const is_prod = !!env.production; const is_prod = !!env.production;
@@ -28,6 +29,8 @@ module.exports = (env = {}) => {
const SCSS_LOADER = { loader: 'sass-loader' }; const SCSS_LOADER = { loader: 'sass-loader' };
const MINI_CSS_LOADER = MiniCssExtractPlugin.loader;
const BABEL_LOADER = { const BABEL_LOADER = {
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
@@ -39,9 +42,13 @@ module.exports = (env = {}) => {
loader: 'vue-loader', loader: 'vue-loader',
options: { options: {
loaders: { loaders: {
css: ['vue-style-loader', CSS_LOADER, POSTCSS_LOADER], css: [
MINI_CSS_LOADER, //'vue-style-loader',
CSS_LOADER,
POSTCSS_LOADER,
],
scss: [ scss: [
'vue-style-loader', MINI_CSS_LOADER, //'vue-style-loader',
CSS_LOADER, CSS_LOADER,
POSTCSS_LOADER, POSTCSS_LOADER,
'sass-loader', 'sass-loader',
@@ -71,12 +78,18 @@ module.exports = (env = {}) => {
}, },
{ {
test: /\.css$/, test: /\.css$/,
use: [STYLE_LOADER, CSS_LOADER, POSTCSS_LOADER], use: [
MINI_CSS_LOADER,
// STYLE_LOADER,
CSS_LOADER,
POSTCSS_LOADER,
],
}, },
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
STYLE_LOADER, MINI_CSS_LOADER,
// STYLE_LOADER,
CSS_LOADER, CSS_LOADER,
POSTCSS_LOADER, POSTCSS_LOADER,
SCSS_LOADER, SCSS_LOADER,
@@ -88,6 +101,14 @@ module.exports = (env = {}) => {
}, },
], ],
}, },
plugins: [new VueLoaderPlugin()], plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
// chunkFilename: "[id].css"
}),
],
}; };
}; };