david/new-webpack-4-vscode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new version for latest webpack 4.28.x

Browse Source
This commit is contained in:
David Meincke
2019-01-20 12:54:34 +01:00
parent b060a71135
commit 5ca9607377
24 changed files with 12481 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3 -3
View File
@@ -1,3 +1,3 @@
/node_modules
package-lock.json
/dist
node_modules
prod_dist
dev_dist
.vscode/launch.json
Vendored
+6 -12
View File
@@ -7,26 +7,20 @@
{
"type": "node",
"request": "launch",
"name": "1. Run NPM install (first time run)",
"program": "${workspaceFolder}/BuildScripts/npm-install.js"
"name": "1. Install NPM packages (first time only)",
"program": "${workspaceFolder}/BuildScripts/install-npm-packages.js"
},
{
"type": "node",
"request": "launch",
"name": "2. Start webpack server (w. hot)",
"program": "${workspaceFolder}/BuildScripts/webpack-server.js"
"name": "2. Start server (w. hot)",
"program": "${workspaceFolder}/BuildScripts/start-webpack-dev-server.js"
},
{
"type": "node",
"request": "launch",
"name": "3. Re-open localhost (if webpack server already running)",
"program": "${workspaceFolder}/BuildScripts/open-localhost.js"
},
{
"type": "node",
"request": "launch",
"name": "4. Publish",
"program": "${workspaceFolder}/BuildScripts/publish.js"
"name": "3. Build for production",
"program": "${workspaceFolder}/BuildScripts/output-production.js"
}
]
}
.vscode/settings.json
Vendored
-3
View File
@@ -1,3 +0,0 @@
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}
BuildScripts/npm-install.js → BuildScripts/install-npm-packages.js
View File
BuildScripts/open-localhost.js
-3
View File
@@ -1,3 +0,0 @@
var open = require("open");
open("http://localhost:8080");
BuildScripts/output-production.js
+6
View File
@@ -0,0 +1,6 @@
const open = require("open");
const runScript = require("./run-npm-script");
runScript("production", () => {
console.log('Successful output to "prod-dist" folder');
});
BuildScripts/publish.js
-20
View File
@@ -1,20 +0,0 @@
var npm = require("npm");
var open = require("open");
npm.load(function(err) {
npm.commands.run(['webpack-production'], function(er, data) {
// log errors or data
if (er){
console.error(er);
}
if (data) {
console.log("Publish done!");
}
});
npm.on('log', function(message) {
// log installation progress
console.log(message);
});
});
BuildScripts/run-npm-script.js
+31
View File
@@ -0,0 +1,31 @@
const npm = require("npm");
module.exports = function(scriptName, onSuccess, onError) {
npm.load(function(err) {
console.log('Running npm script: "' + scriptName + '"');
npm.commands.run([scriptName], function(error, data) {
if (error) {
console.error('Npm script: "' + scriptName + '" error', error);
if (onError) {
onError(error);
}
}
else {
console.log('Npm script: "' + scriptName + '" ran successfully');
if (onSuccess) {
onSuccess(data);
}
}
});
npm.on('log', function(message) {
console.log('Npm script: "' + scriptName + '" log', message);
});
});
}
BuildScripts/start-webpack-dev-server.js
+6
View File
@@ -0,0 +1,6 @@
const open = require("open");
const runScript = require("./run-npm-script");
runScript("server", () => {
open("http://localhost:8020");
});
BuildScripts/webpack-server.js
-17
View File
@@ -1,17 +0,0 @@
var npm = require("npm");
var open = require("open");
npm.load(function(err) {
npm.commands.run(['webpack-dev-server'], function(er, data) {
// log errors or data
if (er){
console.error(er);
}
});
open("http://localhost:8080");
npm.on('log', function(message) {
// log installation progress
console.log(message);
});
});
app/app.html
+1
View File
@@ -0,0 +1 @@
<div>App running</div>
app/app.less
+3
View File
@@ -0,0 +1,3 @@
body {
background: aqua;
}
app/boot.html
-3
View File
@@ -1,3 +0,0 @@
<div>
my app-root html here!
</div>
app/boot.less
-8
View File
@@ -1,8 +0,0 @@
html, body {
position: relative;
height: 100%;
width: 100%;
background: rgb(179, 179, 179);
margin: 0;
overflow: hidden;
}
app/boot.ts
+3 -2
View File
@@ -1,5 +1,6 @@
require("./boot.less");
var bootHtml = require("./boot.html");
import './app.less';
import bootHtml from './app.html';
var appEle = document.createElement("app-root");
appEle.innerHTML = bootHtml;
index.html
-3
View File
@@ -8,9 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Title</title>
<link rel="apple-touch-icon" href="logo.png">
<link rel="apple-touch-startup-image" href='splash.png'>
<link rel="manifest" href="manifest.json?v=1">
<base href="/" />
package-lock.json
Generated
+12279
View File
File diff suppressed because it is too large Load Diff
package.json
+29 -22
View File
@@ -1,33 +1,40 @@
{
"version": "0.0.1",
"name": "new-webpack",
"description": "new-webpack",
"version": "0.0.2",
"name": "drummachine",
"description": "web drumkit project",
"license": "0BSD",
"repository": {},
"scripts": {
"webpack-error-details": "webpack --display-error-details",
"webpack-development": "webpack --display-error-details --mode development",
"webpack-production": "webpack --display-error-details --mode production",
"webpack-dev-server": "webpack-dev-server"
"webpack": "webpack --config webpack.dev.js --display-error-details",
"dev": "webpack --config webpack.dev.js --display-error-details",
"server": "webpack-dev-server --port 8020 --open --config webpack.dev.js",
"production": "webpack --config webpack.prod.js"
},
"dependencies": {},
"devDependencies": {
"@types/webpack-env": "1.13.6",
"copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.11",
"file-loader": "1.1.11",
"gulp": "3.9.1",
"@webcomponents/custom-elements": "1.2.1",
"@babel/core": "7.2.2",
"babel-loader": "8.0.5",
"babel-plugin-transform-custom-element-classes": "0.1.0",
"babel-preset-env": "1.7.0",
"copy-webpack-plugin": "4.6.0",
"css-loader": "2.1.0",
"extract-text-webpack-plugin": "3.0.2",
"replace-in-file-webpack-plugin": "1.0.6",
"file-loader": "3.0.1",
"gulp": "4.0.0",
"html-loader": "0.5.5",
"less": "3.0.2",
"less": "3.9.0",
"less-loader": "4.1.0",
"npm": "6.0.0",
"npm": "6.6.0",
"open": "0.0.5",
"replace-in-file-webpack-plugin": "1.0.5",
"style-loader": "0.21.0",
"ts-loader": "4.2.0",
"typescript": "2.8.3",
"webpack": "4.6.0",
"webpack-cli": "2.0.15",
"webpack-dev-server": "3.1.3",
"webpack-merge": "4.1.2"
"path": "0.12.7",
"style-loader": "0.23.1",
"ts-loader": "5.3.3",
"webpack": "4.28.4",
"webpack-cli": "3.2.1",
"webpack-dev-server": "3.1.14",
"webpack-merge": "4.2.1",
"typescript": "3.2.4"
}
}
tsconfig.json
+2 -2
View File
@@ -8,9 +8,9 @@
"skipLibCheck": true,
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env" ],
"types": [ ],
"allowJs": true
},
"exclude": [ "bin", "node_modules" ],
"exclude": [ "bin", "node_modules", "webpack.common.js", "webpack.dev.js", "webpack.prod.js" ],
"atom": { "rewriteTsconfig": false }
}
typings.d.ts
Vendored
+7
View File
@@ -0,0 +1,7 @@
declare module '*.html' {
const content: string;
export default content;
}
declare module '*.png';
declare module '*.jpg';
webpack.common.js
+33
View File
@@ -0,0 +1,33 @@
const path = require('path');
module.exports = {
entry: {
'main': path.resolve(__dirname, 'App', 'boot.ts')
},
resolve: {
extensions: [".ts", ".js", ".json"]
},
module: {
rules: [
{
//ts to js
test: /\.ts$/,
use: 'ts-loader'
},
{
//html to js
test: /\.html$/,
use: 'html-loader'
},
{
//css to js to inline style append
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
//less to css to js to inline style append
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
};
webpack.config.js
-105
View File
@@ -1,105 +0,0 @@
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
module.exports = (env, argv) => {
var isDevServer = argv.mode === undefined;
if (isDevServer && __dirname.indexOf(" ") !== -1) {
throw new Error("Space in __dirname not allowed: " + __dirname);
}
const sharedSettings = {
entry: {
'main': path.resolve(__dirname, 'App', 'boot.ts')
},
resolve: {
extensions: [".ts", ".js", ".json"]
},
module: {
rules: [
{
//ts to js
test: /\.ts$/,
use: 'ts-loader'
},
{
//html to js
test: /\.html$/,
use: 'html-loader'
},
{
//css to js to inline style append
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
//less to css to js to inline style append
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
}
const developmentSettings = {
mode: 'development',
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/",
filename: 'main.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '*.html'),
to: path.resolve(__dirname, 'dist', '[name].[ext]')
}
])
]
};
const productionSettings = {
mode: "production",
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '*.html'),
to: path.resolve(__dirname, 'dist', '[name].[ext]')
}
]),
new ReplaceInFileWebpackPlugin(
[
{
dir: path.join(__dirname, 'dist'),
test: /\.html$/,
rules: [
{
search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
replace: (match) => {
return match.toString().substr(0, 3) +
+new Date();
}
}
]
}
]
)
]
}
//to merge sharedSettings
var dev = Object.assign({}, sharedSettings, developmentSettings);
var prod = Object.assign({}, sharedSettings, productionSettings);
//return dev or prod to webpack depending on --mode config (webpack-dev-server: argv.mode = undefined)
return argv.mode === "development" || argv.mode === undefined ? dev : prod;
};
webpack.dev.js
+27
View File
@@ -0,0 +1,27 @@
const path = require('path');
const merge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const common = require('./webpack.common.js');
const devFolderName = "dev-dist";
module.exports = merge(common, {
mode: 'development',
output: {
path: path.resolve(__dirname, devFolderName),
publicPath: "/",
filename: 'main.js'
},
devServer: {
contentBase: './' + devFolderName,
historyApiFallback: true
},
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '*.html'),
to: path.resolve(__dirname, devFolderName, '[name].[ext]')
}
])
]
});
webpack.prod.js
+44
View File
@@ -0,0 +1,44 @@
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const prodFolderName = "prod-dist";
const replaceVersionInHtmlOption = {
//set ?v= with new date in html files for production
dir: path.join(__dirname, prodFolderName),
test: /\.html$/,
rules: [
{
search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
replace: (match) => {
return match.toString().substr(0, 3) +
+new Date();
}
}
]
};
module.exports = merge(common, {
mode: "production",
output: {
path: path.resolve(__dirname, prodFolderName),
publicPath: "/",
filename: 'main.js'
},
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '*.html'),
to: path.resolve(__dirname, prodFolderName, '[name].[ext]')
}
]),
new ReplaceInFileWebpackPlugin(
[
replaceVersionInHtmlOption
]
)
]
});