status-im
/
codimd
mirror of https://github.com/status-im/codimd.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #242 from Yukaii/webpack-stylesheet 

Use webpack to bundle stylesheet
This commit is contained in:
Max Wu 2016-11-03 14:17:10 +08:00 committed by GitHub
parent 734d475c0e 689b1dc4d6
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');

5
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;

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,