Scaffold webpack
This commit is contained in:
parent
f277d5dfaa
commit
e95f1fef4a
10 changed files with 10762 additions and 0 deletions
5
.dockerignore
Normal file
5
.dockerignore
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
node_modules
|
||||
dist
|
||||
target
|
||||
package-lock.json
|
||||
.*
|
||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
**/node_modules
|
||||
**/dist
|
||||
9
Dockerfile
Normal file
9
Dockerfile
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
FROM node:latest as build
|
||||
|
||||
WORKDIR /home/node
|
||||
COPY . .
|
||||
RUN npm install
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /home/node/dist/ /usr/share/nginx/html
|
||||
10485
package-lock.json
generated
Normal file
10485
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
49
package.json
Normal file
49
package.json
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"name": "decla.red",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "András Schmelczer",
|
||||
"license": "UNLICENSED",
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
],
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.7.6",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"css-loader": "^3.5.2",
|
||||
"cssnano": "latest",
|
||||
"file-loader": "^5.1.0",
|
||||
"html-webpack-inline-source-plugin": "0.0.10",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"image-webpack-loader": "^6.0.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"prettier": "^1.19.1",
|
||||
"resolve-url-loader": "^3.1.1",
|
||||
"responsive-loader": "^1.2.0",
|
||||
"sass": "^1.26.3",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sharp": "^0.23.4",
|
||||
"style-loader": "^1.1.4",
|
||||
"svg-url-loader": "^3.0.3",
|
||||
"terser-webpack-plugin": "^2.3.5",
|
||||
"ts-loader": "^6.2.2",
|
||||
"typescript": "^3.8.3",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "^3.10.3"
|
||||
}
|
||||
}
|
||||
19
src/index.html
Normal file
19
src/index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#b7455e" />
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<noscript><h1>Javascript is required for this website.</h1></noscript>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
9
src/index.ts
Normal file
9
src/index.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
function component() {
|
||||
const element = document.createElement('div');
|
||||
|
||||
element.innerHTML = 'Hello world';
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
document.body.appendChild(component());
|
||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": false,
|
||||
"module": "es6",
|
||||
"target": "es5",
|
||||
"downlevelIteration": true,
|
||||
"allowJs": true
|
||||
}
|
||||
}
|
||||
173
webpack.config.js
Normal file
173
webpack.config.js
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const TerserJSPlugin = require('terser-webpack-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
|
||||
const Sharp = require('responsive-loader/sharp');
|
||||
const Sass = require('sass');
|
||||
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
module.exports = {
|
||||
watchOptions: {
|
||||
ignored: /node_modules/,
|
||||
},
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
disableHostCheck: true,
|
||||
},
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new TerserJSPlugin({
|
||||
sourceMap: !isProduction,
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({}),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
xhtml: true,
|
||||
template: './src/index.html',
|
||||
minify: {
|
||||
collapseWhitespace: true,
|
||||
removeComments: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
useShortDoctype: true,
|
||||
},
|
||||
inlineSource: '.(js|css)$',
|
||||
}),
|
||||
new HtmlWebpackInlineSourcePlugin(),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[contenthash].css',
|
||||
chunkFilename: '[id].[contenthash].css',
|
||||
}),
|
||||
],
|
||||
entry: {
|
||||
index: './src/index.ts',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(jpe?g|png)$/i,
|
||||
loader: 'responsive-loader',
|
||||
options: {
|
||||
adapter: Sharp,
|
||||
outputPath: 'static/',
|
||||
sizes: [200, 400, 800, 1200, 2000],
|
||||
placeholder: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(webm|mp4|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
query: {
|
||||
outputPath: 'static/',
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'image-webpack-loader',
|
||||
options: {
|
||||
disable: !isProduction,
|
||||
mozjpeg: {
|
||||
progressive: true,
|
||||
quality: 65,
|
||||
},
|
||||
optipng: {
|
||||
enabled: true,
|
||||
},
|
||||
pngquant: {
|
||||
quality: [0.65, 0.9],
|
||||
speed: 4,
|
||||
},
|
||||
gifsicle: {
|
||||
interlaced: false,
|
||||
},
|
||||
webp: {
|
||||
quality: 65,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-url-loader',
|
||||
options: {
|
||||
limit: 10 * 1024,
|
||||
noquotes: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(pdf)$/i,
|
||||
use: {
|
||||
loader: 'file-loader',
|
||||
query: {
|
||||
outputPath: 'static/',
|
||||
name: '[name].[ext]',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.ico$/i,
|
||||
use: {
|
||||
loader: 'file-loader',
|
||||
query: {
|
||||
outputPath: '/',
|
||||
name: '[name].[ext]',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.scss$/i,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader',
|
||||
options: {
|
||||
keepQuery: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
implementation: Sass,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|ttf|eot|svg)(?:[?#].+)?$/,
|
||||
use: {
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'static/fonts/',
|
||||
},
|
||||
},
|
||||
include: /fonts/,
|
||||
},
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.js'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue