depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #242 from Yukaii/webpack-stylesheet

Browse source 
Use webpack to bundle stylesheet
This commit is contained in:
Max Wu 2016-11-03 14:17:10 +08:00 committed by GitHub
commit 11faadb684
15 changed files with 100 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.editorconfig
View file

@ -9,3 +9,7 @@ insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{.travis.yml,npm-shrinkwrap.json,package.json}]
indent_style = space
indent_size = 2

1
package.json
View file

@ -137,6 +137,7 @@
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",

3
public/js/cover.js
View file

@ -1,5 +1,8 @@
require('./locale');
require('../css/cover.css');
require('../css/site.css');
var common = require('./common');
var checkIfAuth = common.checkIfAuth;
var urlpath = common.urlpath;

2
public/js/extra.js
View file

@ -588,7 +588,7 @@ function exportToHTML(view) {
var tocAffix = $('#ui-toc-affix').clone();
tocAffix.find('*').removeClass('active').find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll');
//generate html via template
$.get(serverurl + '/css/html.min.css', function (css) {
$.get(serverurl + '/build/html.min.css', function (css) {
$.get(serverurl + '/views/html.hbs', function (data) {
var template = Handlebars.compile(data);
var context = {

5
public/js/htmlExport.js Normal file
View file

@ -0,0 +1,5 @@
require('../css/github-extract.css');
require('../css/markdown.css');
require('../css/extra.css');
require('../css/slide-preview.css');
require('../css/site.css');

7
public/js/index.js
View file

@ -1,6 +1,11 @@
/* jquery and jquery plugins */
require('../vendor/showup/showup');
require('../css/index.css');
require('../css/extra.css');
require('../css/slide-preview.css');
require('../css/site.css');
var toMarkdown = require('to-markdown');
var saveAs = require('file-saver').saveAs;
@ -2306,7 +2311,7 @@ socket.on('delete', function () {
saveHistory(newnotehistory);
location.href = serverurl;
});
}
}
});
var retryTimer = null;
socket.on('maintenance', function () {

4
public/js/pretty.js
View file

@ -1,3 +1,7 @@
require('../css/extra.css');
require('../css/slide-preview.css');
require('../css/site.css');
/* other vendors plugin */
var S = require('string');

3
public/js/slide.js
View file

@ -1,3 +1,6 @@
require('../css/extra.css');
require('../css/site.css');
require('../css/slide.css');
/* other vendors plugin */
var S = require('string');

6
public/views/head.ejs
View file

@ -35,11 +35,9 @@
<link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
<link rel="stylesheet" href="<%- url %>/css/mermaid.css">
<link rel="stylesheet" href="<%- url %>/css/markdown.css">
<%- include build/index-header %>
<link rel="stylesheet" href="<%- url %>/css/index.css">
<link rel="stylesheet" href="<%- url %>/css/extra.css">
<link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
<link rel="stylesheet" href="<%- url %>/css/site.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>

2
public/views/index.ejs
View file

@ -30,8 +30,6 @@
<% } %>
<!-- Custom styles for this template -->
<%- include build/cover-header %>
<link rel="stylesheet" href="<%- url %>/css/cover.css">
<link rel="stylesheet" href="<%- url %>/css/site.css">
</head>
<body>

3
public/views/pretty.ejs
View file

@ -32,9 +32,6 @@
<link rel="stylesheet" href='<%- url %>/css/markdown.css'>
<link rel="stylesheet" href='<%- url %>/vendor/emojify.js/dist/css/basic/emojify.min.css'>
<%- include build/pretty-header %>
<link rel="stylesheet" href='<%- url %>/css/extra.css'>
<link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
<link rel="stylesheet" href='<%- url %>/css/site.css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>

5
public/views/slide.ejs
View file

@ -36,9 +36,8 @@
<link rel="stylesheet" href="<%- url %>/css/mermaid.css">
<link rel="stylesheet" href='<%- url %>/css/markdown.css'>
<link rel="stylesheet" href='<%- url %>/vendor/emojify.js/dist/css/basic/emojify.min.css'>
<link rel="stylesheet" href='<%- url %>/css/extra.css'>
<link rel="stylesheet" href="<%- url %>/css/site.css">
<link rel="stylesheet" href="<%- url %>/css/slide.css">
<%- include build/slide-header %>
<!-- Printing and PDF exports -->
<script>

32
webpack.config.js
View file

@ -1,3 +1,33 @@
var baseConfig = require('./webpackBaseConfig');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = baseConfig;
module.exports = [Object.assign({}, baseConfig, {
plugins: baseConfig.plugins.concat([
new ExtractTextPlugin("[name].css")
])
}), {
entry: {
htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
},
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
}]
},
output: {
path: path.join(__dirname, 'public/build'),
publicPath: '/build/',
filename: '[name].js'
},
plugins: [
new ExtractTextPlugin("html.min.css")
]
}];

111
webpack.production.js
View file

@ -1,77 +1,11 @@
var baseConfig = require('./webpackBaseConfig');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = Object.assign({}, baseConfig, {
plugins: [
new webpack.ProvidePlugin({
Visibility: "visibilityjs",
Cookies: "js-cookie",
key: "keymaster",
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"moment": "moment",
"Handlebars": "handlebars"
}),
new ExtractTextPlugin("[name].css"),
new webpack.optimize.CommonsChunkPlugin({
names: ["cover", "index", "pretty", "slide", "vendor"],
children: true,
async: true,
filename: '[name].js',
minChunks: Infinity
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/header.ejs',
chunks: ['vendor', 'index'],
filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/scripts.ejs',
chunks: ['vendor', 'index'],
filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/header.ejs',
chunks: ['vendor', 'cover'],
filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/scripts.ejs',
chunks: ['vendor', 'cover'],
filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/header.ejs',
chunks: ['vendor', 'pretty'],
filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/scripts.ejs',
chunks: ['vendor', 'pretty'],
filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/header.ejs',
chunks: ['vendor', 'slide'],
filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
inject: false
}),
new HtmlWebpackPlugin({
template: 'public/views/includes/scripts.ejs',
chunks: ['vendor', 'slide'],
filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
inject: false
}),
module.exports = [Object.assign({}, baseConfig, {
plugins: baseConfig.plugins.concat([
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
@ -83,12 +17,43 @@ module.exports = Object.assign({}, baseConfig, {
},
mangle: false,
sourceMap: false
})
],
}),
new ExtractTextPlugin("[name].[hash].css")
]),
output: {
path: path.join(__dirname, 'public/build'),
publicPath: '/build/',
filename: '[id].[name].[hash].js'
}
}), {
entry: {
htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
},
});
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
}]
},
output: {
path: path.join(__dirname, 'public/build'),
publicPath: '/build/',
filename: '[name].js'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin("html.min.css"),
new OptimizeCssAssetsPlugin()
]
}];

1
webpackBaseConfig.js
View file

@ -15,7 +15,6 @@ module.exports = {
"moment": "moment",
"Handlebars": "handlebars"
}),
new ExtractTextPlugin("[name].css"),
new webpack.optimize.CommonsChunkPlugin({
names: ["cover", "index", "pretty", "slide", "vendor"],
children: true,