Base webpack config
This commit is contained in:
Jeff Avallone
parent
c67101a209
commit
d78f4efd16
21
package.json
21
package.json
@ -10,5 +10,26 @@
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"start:prod": "run-s build start:http-server",
|
||||
"start:http-server": "http-server ./build",
|
||||
"build": "webpack"
|
||||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^7.2.5",
|
||||
"copy-webpack-plugin": "^4.4.1",
|
||||
"css-loader": "^0.28.9",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"favicons-webpack-plugin-cesco": "^0.0.6",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"precss": "^3.1.0",
|
||||
"style-loader": "^0.20.1",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-server": "^2.11.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"http-server": "^0.11.1",
|
||||
"npm-run-all": "^4.1.2"
|
||||
}
|
||||
}
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
use: [
|
||||
'precss',
|
||||
'autoprefixer'
|
||||
]
|
||||
};
|
||||
25
src/favicon.svg
Normal file
25
src/favicon.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="0 0 512 512">
|
||||
<style><![CDATA[
|
||||
@import url('https://fonts.googleapis.com/css?family=Bangers&text=R');
|
||||
|
||||
text {
|
||||
font-family: 'Bangers';
|
||||
font-size: 400px;
|
||||
}
|
||||
|
||||
rect {
|
||||
stroke: #000;
|
||||
stroke-width: 5px;
|
||||
}
|
||||
]]></style>
|
||||
<defs>
|
||||
<radialGradient id="shade" cx="0.5" cy="0.5" fx="0.5" fy="0" r="1">
|
||||
<stop stop-color="#000" stop-opacity="0.0" offset="0%" />
|
||||
<stop stop-color="#000" stop-opacity="0.4" offset="100%" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="512" height="512" fill="#bada55"></rect>
|
||||
<rect x="0" y="0" width="512" height="512" fill="url(#shade)"></rect>
|
||||
<text transform="translate(0 353) translate(-103 -212) translate(256 256)">R</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 849 B |
1
src/pages/404/index.js
Normal file
1
src/pages/404/index.js
Normal file
@ -0,0 +1 @@
|
||||
import '../../style.css';
|
||||
10
src/pages/404/template.html
Normal file
10
src/pages/404/template.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Regexper - 404</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>404</h1>
|
||||
</body>
|
||||
</html>
|
||||
1
src/pages/index/index.js
Normal file
1
src/pages/index/index.js
Normal file
@ -0,0 +1 @@
|
||||
import '../../style.css';
|
||||
10
src/pages/index/template.html
Normal file
10
src/pages/index/template.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Regexper</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>App Content</h1>
|
||||
</body>
|
||||
</html>
|
||||
3
src/style.css
Normal file
3
src/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
100
webpack.config.js
Normal file
100
webpack.config.js
Normal file
@ -0,0 +1,100 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const webpack = require('webpack');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const FaviconsPlugin = require('favicons-webpack-plugin-cesco');
|
||||
const HtmlPlugin = require('html-webpack-plugin');
|
||||
|
||||
const pkg = require('./package.json');
|
||||
|
||||
const pages = fs.readdirSync(path.resolve(__dirname, 'src/pages'));
|
||||
const pagePlugins = pages.map(name => new HtmlPlugin({
|
||||
template: `./src/pages/${ name }/template.html`,
|
||||
filename: `${ name }.html`,
|
||||
chunks: ['common', name],
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
minifyURLs: true
|
||||
}
|
||||
}));
|
||||
|
||||
module.exports = {
|
||||
entry: pages.reduce((pages, name) => {
|
||||
pages[name] = `./src/pages/${ name }`;
|
||||
return pages;
|
||||
}, {}),
|
||||
output: {
|
||||
filename: 'js/[name].[chunkhash:8].js',
|
||||
chunkFilename: 'js/[name].[chunkhash:8].js',
|
||||
path: path.resolve(__dirname, 'build')
|
||||
},
|
||||
plugins: [
|
||||
new webpack.EnvironmentPlugin({
|
||||
NODE_ENV: 'development'
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'common',
|
||||
minChunks: 2
|
||||
}),
|
||||
new FaviconsPlugin({
|
||||
logo: './src/favicon.svg',
|
||||
persistentCache: true,
|
||||
inject: true,
|
||||
config: {
|
||||
appName: 'Regexper',
|
||||
appDescription: pkg.description,
|
||||
developerName: pkg.author.name,
|
||||
developerUrl: 'https://github.com/javallone/',
|
||||
background: '#6b6659',
|
||||
theme_color: '#bada55',
|
||||
start_url: '/',
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
coast: false,
|
||||
favicons: true,
|
||||
firefox: false,
|
||||
windows: true,
|
||||
yandex: false
|
||||
}
|
||||
}
|
||||
}),
|
||||
new ExtractTextPlugin('css/[name].[contenthash:8].css'),
|
||||
new CopyPlugin(['./public']),
|
||||
...pagePlugins
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
minimize: true,
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user