Skip to content
This repository was archived by the owner on Sep 24, 2020. It is now read-only.

Commit 15ffe44

Browse files
committed
Use webpack html and icon generation
1 parent 4357405 commit 15ffe44

16 files changed

+3581
-346
lines changed

CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Change log
22

3+
## [v0.9.0] (2017-08-24)
4+
5+
**Features**
6+
7+
* Add [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) for creating HTML files
8+
* Add webpack loaders for loading sass styles
9+
* Add [favicon webpack generator](https://github.com/jantimon/favicons-webpack-plugin) for creating favicons and icons!
10+
311
## [v0.8.0] (2017-08-24)
412

513
**Features**
@@ -101,6 +109,7 @@
101109
[#3]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/3
102110
[#2]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/2
103111
[#1]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/1
112+
[v0.9.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.8.0...v0.9.0
104113
[v0.8.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.7.1...v0.8.0
105114
[v0.7.1]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.7.0...v0.7.1
106115
[v0.7.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.6.0...v0.7.0

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@ $ npm run dev
2424
- `npm run test:watch`: Fast feedback Mocha unit tests with hot-reload
2525
- `npm run coverage`: Karma coverage reporter
2626
- `npm run lint`: Lint all Typescript files
27-
- `npm run build`: build with HTML/CSS/JS minification.
27+
- `npm run build`: build with HTML/CSS/JS minification and icon generation
2828
- `npm run ci:teamcity`: Teamcity CI integration
2929
- `npm run ci:jenkins`: Jenkins CI integration

template/config/helpers.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
const path = require("path");
1+
const path = require('path');
22

33
// Helper functions
4-
const ROOT = path.resolve(__dirname, "..");
4+
const ROOT = path.resolve(__dirname, '..');
55

66
function root(args) {
77
args = Array.prototype.slice.call(arguments, 0);

template/config/webpack.config.base.js

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,45 @@
1-
const helpers = require("./helpers"),
1+
const helpers = require('./helpers'),
22
CopyWebpackPlugin = require('copy-webpack-plugin');
33

44
let config = {
55
entry: {
6-
"main": helpers.root("/src/main.ts")
6+
'main': helpers.root('/src/main.ts')
77
},
88
output: {
9-
path: helpers.root("/dist/js"),
10-
filename: "[name].js"
9+
path: helpers.root('/dist'),
10+
filename: 'js/[name].[hash].js'
1111
},
12-
devtool: "source-map",
12+
devtool: 'source-map',
1313
resolve: {
14-
extensions: [".ts", ".js", ".html"],
14+
extensions: ['.ts', '.js', '.html'],
1515
alias: {
16-
'vue$': 'vue/dist/vue.common.js'
16+
'vue$': 'vue/dist/vue.esm.js',
1717
}
1818
},
1919
module: {
20-
rules: [
21-
{test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader'},
22-
{test: /\.ts$/, exclude: /node_modules/, loader: "awesome-typescript-loader"},
23-
{test: /\.html$/, loader: 'raw-loader', exclude: ['./src/index.html']}
20+
rules: [{
21+
test: /\.ts$/,
22+
exclude: /node_modules/,
23+
enforce: 'pre',
24+
loader: 'tslint-loader'
25+
},
26+
{
27+
test: /\.ts$/,
28+
exclude: /node_modules/,
29+
loader: 'awesome-typescript-loader'
30+
},
31+
{
32+
test: /\.html$/,
33+
loader: 'raw-loader',
34+
exclude: ['./src/index.html']
35+
}
2436
],
2537
},
2638
plugins: [
27-
new CopyWebpackPlugin([
28-
{from: 'src/assets', to: '../assets'},
29-
{from: 'src/css', to: '../css'}
30-
]),
39+
new CopyWebpackPlugin([{
40+
from: 'src/assets',
41+
to: './assets'
42+
}, ]),
3143
]
3244
};
3345

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,12 @@
1-
const webpackConfig = require("./webpack.config.base")
2-
DefinePlugin = require('webpack/lib/DefinePlugin'),
3-
SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin'),
4-
env = require('../environment/dev.env');
5-
6-
webpackConfig.module.rules[1].query = {
7-
compilerOptions: {
8-
inlineSourceMap: true,
9-
sourceMap: false
10-
}
11-
};
1+
const webpackConfig = require('./webpack.config.test');
122

133
webpackConfig.module.rules = [...webpackConfig.module.rules,
144
{
155
test: /\.ts$/,
16-
enforce: "post",
17-
loader: "istanbul-instrumenter-loader",
6+
enforce: 'post',
7+
loader: 'istanbul-instrumenter-loader',
188
exclude: [
19-
"node_modules",
9+
'node_modules',
2010
/\.spec\.ts$/
2111
],
2212
query: {
@@ -25,16 +15,4 @@ webpackConfig.module.rules = [...webpackConfig.module.rules,
2515
}
2616
];
2717

28-
webpackConfig.plugins = [...webpackConfig.plugins,
29-
new SourceMapDevToolPlugin({
30-
filename: null, // if no value is provided the sourcemap is inlined
31-
test: /\.(ts|js)($|\?)/i
32-
}),
33-
new DefinePlugin({
34-
'process.env': env
35-
})
36-
];
37-
38-
webpackConfig.devtool = "inline-source-map";
39-
4018
module.exports = webpackConfig;

template/config/webpack.config.dev.js

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,50 @@
1-
const helpers = require("./helpers"),
2-
webpackConfig = require("./webpack.config.base"),
1+
const helpers = require('./helpers'),
2+
webpackConfig = require('./webpack.config.base'),
3+
HtmlWebpackPlugin = require('html-webpack-plugin'),
34
DefinePlugin = require('webpack/lib/DefinePlugin'),
45
env = require('../environment/dev.env');
56

7+
webpackConfig.module.rules = [...webpackConfig.module.rules,
8+
{
9+
test: /\.scss$/,
10+
use: [{
11+
loader: 'style-loader'
12+
},
13+
{
14+
loader: 'css-loader'
15+
},
16+
{
17+
loader: 'sass-loader'
18+
}
19+
]
20+
},
21+
{
22+
test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
23+
loader: 'file-loader'
24+
}
25+
];
26+
27+
webpackConfig.plugins = [...webpackConfig.plugins,
28+
new HtmlWebpackPlugin({
29+
inject: true,
30+
template: helpers.root('/src/index.html'),
31+
favicon: helpers.root('/src/favicon.ico')
32+
}),
33+
new DefinePlugin({
34+
'process.env': env
35+
})
36+
];
37+
638
webpackConfig.devServer = {
739
port: 8080,
8-
host: "localhost",
40+
host: 'localhost',
941
historyApiFallback: true,
10-
watchOptions: {aggregateTimeout: 300, poll: 1000},
42+
watchOptions: {
43+
aggregateTimeout: 300,
44+
poll: 1000
45+
},
1146
contentBase: './src',
1247
open: true
1348
};
1449

15-
webpackConfig.plugins = [...webpackConfig.plugins,
16-
new DefinePlugin({
17-
'process.env': env
18-
})
19-
]
20-
2150
module.exports = webpackConfig;
Lines changed: 90 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,108 @@
1-
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'),
1+
const glob = require('glob'),
2+
path = require('path'),
3+
UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'),
4+
HtmlWebpackPlugin = require('html-webpack-plugin'),
25
CompressionPlugin = require('compression-webpack-plugin'),
3-
webpackConfig = require("./webpack.config.base"),
4-
helpers = require("./helpers"),
6+
ExtractTextPlugin = require('extract-text-webpack-plugin'),
7+
PurifyCSSPlugin = require('purifycss-webpack'),
8+
FaviconsWebpackPlugin = require('favicons-webpack-plugin'),
9+
autoprefixer = require('autoprefixer'),
10+
webpackConfig = require('./webpack.config.base'),
11+
helpers = require('./helpers'),
512
DefinePlugin = require('webpack/lib/DefinePlugin'),
613
env = require('../environment/prod.env');
714

8-
webpackConfig.entry["main.min"] = helpers.root("/src/main.ts");
15+
const extractSass = new ExtractTextPlugin({
16+
filename: 'css/[name].[contenthash].css',
17+
disable: process.env.NODE_ENV === 'development'
18+
});
19+
20+
const purifyCss = new PurifyCSSPlugin({
21+
paths: glob.sync(path.join(__dirname, '../src/**/*.html')),
22+
purifyOptions: {
23+
info: true,
24+
whitelist: []
25+
}
26+
});
27+
28+
webpackConfig.module.rules = [...webpackConfig.module.rules,
29+
{
30+
test: /\.scss$/,
31+
use: extractSass.extract({
32+
use: [{
33+
loader: 'css-loader',
34+
options: {
35+
minimize: true,
36+
sourceMap: true,
37+
importLoaders: 2
38+
}
39+
},
40+
{
41+
loader: 'postcss-loader',
42+
options: {
43+
plugins: () => [autoprefixer]
44+
}
45+
},
46+
{
47+
loader: 'sass-loader',
48+
options: {
49+
outputStyle: 'expanded',
50+
sourceMap: true,
51+
sourceMapContents: true
52+
}
53+
}
54+
],
55+
// use style-loader in development
56+
fallback: 'style-loader'
57+
})
58+
},
59+
{
60+
test: /\.(jpg|png|gif)$/,
61+
loader: 'file-loader?name=assets/img/[name].[ext]'
62+
},
63+
{
64+
test: /\.(eot|svg|ttf|woff|woff2)$/,
65+
loader: 'file-loader?name=fonts/[name].[ext]'
66+
}
67+
];
68+
69+
// ensure ts lint fails the build
70+
webpackConfig.module.rules[0].options = {
71+
failOnHint: true
72+
};
973

1074
webpackConfig.plugins = [...webpackConfig.plugins,
75+
extractSass,
76+
purifyCss,
77+
new HtmlWebpackPlugin({
78+
inject: true,
79+
template: helpers.root('/src/index.html'),
80+
favicon: helpers.root('/src/favicon.ico'),
81+
minify: {
82+
removeComments: true,
83+
collapseWhitespace: true,
84+
removeRedundantAttributes: true,
85+
useShortDoctype: true,
86+
removeEmptyAttributes: true,
87+
removeStyleLinkTypeAttributes: true,
88+
keepClosingSlash: true,
89+
minifyJS: true,
90+
minifyCSS: true,
91+
minifyURLs: true
92+
}
93+
}),
1194
new UglifyJsPlugin({
1295
include: /\.min\.js$/,
1396
minimize: true
1497
}),
1598
new CompressionPlugin({
16-
asset: "[path].gz[query]",
99+
asset: '[path].gz[query]',
17100
test: /\.min\.js$/
18101
}),
19102
new DefinePlugin({
20103
'process.env': env
21-
})
104+
}),
105+
new FaviconsWebpackPlugin(helpers.root('/src/icon.png'))
22106
];
23107

24108
module.exports = webpackConfig;

template/config/webpack.config.test.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
var webpack = require('webpack'),
2-
webpackConfig = require('./webpack.config.base'),
3-
DefinePlugin = require('webpack/lib/DefinePlugin'),
4-
SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin'),
5-
env = require('../environment/dev.env');
2+
webpackConfig = require('./webpack.config.base'),
3+
DefinePlugin = require('webpack/lib/DefinePlugin'),
4+
SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin'),
5+
env = require('../environment/dev.env');
66

77
webpackConfig.module.rules = [{
88
test: /\.ts$/,
@@ -19,6 +19,23 @@ webpackConfig.module.rules = [{
1919
test: /\.html$/,
2020
loader: 'raw-loader',
2121
exclude: ['./src/index.html']
22+
},
23+
{
24+
test: /\.scss$/,
25+
use: [{
26+
loader: 'style-loader'
27+
},
28+
{
29+
loader: 'css-loader'
30+
},
31+
{
32+
loader: 'sass-loader'
33+
}
34+
]
35+
},
36+
{
37+
test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
38+
loader: 'url-loader?limit=8192'
2239
}
2340
];
2441

0 commit comments

Comments
 (0)