Configured webpack-dev-server
This commit is contained in:
n1474335
parent
8eb7d65b74
commit
ff78c72d54
166
Gruntfile.js
166
Gruntfile.js
@ -1,8 +1,15 @@
|
||||
const webpack = require("webpack");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const Inliner = require("web-resource-inliner");
|
||||
|
||||
/**
|
||||
* Grunt configuration for building the app in various formats.
|
||||
*
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2017
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
module.exports = function (grunt) {
|
||||
grunt.file.defaultEncoding = "utf8";
|
||||
grunt.file.preserveBOM = false;
|
||||
@ -10,7 +17,7 @@ module.exports = function (grunt) {
|
||||
// Tasks
|
||||
grunt.registerTask("dev",
|
||||
"A persistent task which creates a development build whenever source files are modified.",
|
||||
["clean:dev", "webpack:webDev"]);
|
||||
["clean:dev", "webpack-dev-server:start"]);
|
||||
|
||||
grunt.registerTask("node",
|
||||
"Compiles CyberChef into a single NodeJS module.",
|
||||
@ -26,7 +33,7 @@ module.exports = function (grunt) {
|
||||
|
||||
grunt.registerTask("prod",
|
||||
"Creates a production-ready build. Use the --msg flag to add a compile message.",
|
||||
["eslint", "clean:prod", "webpack:webProd", "inline", "chmod"]);
|
||||
["eslint", "clean:prod", "webpack:web", "inline", "chmod"]);
|
||||
|
||||
grunt.registerTask("default",
|
||||
"Lints the code base",
|
||||
@ -55,27 +62,13 @@ module.exports = function (grunt) {
|
||||
|
||||
// Project configuration
|
||||
const compileTime = grunt.template.today("UTC:dd/mm/yyyy HH:MM:ss") + " UTC",
|
||||
banner = "/**\n" +
|
||||
"* CyberChef - The Cyber Swiss Army Knife\n" +
|
||||
"*\n" +
|
||||
"* @copyright Crown Copyright 2016\n" +
|
||||
"* @license Apache-2.0\n" +
|
||||
"*\n" +
|
||||
"* Copyright 2016 Crown Copyright\n" +
|
||||
"*\n" +
|
||||
'* Licensed under the Apache License, Version 2.0 (the "License");\n' +
|
||||
"* you may not use this file except in compliance with the License.\n" +
|
||||
"* You may obtain a copy of the License at\n" +
|
||||
"*\n" +
|
||||
"* http://www.apache.org/licenses/LICENSE-2.0\n" +
|
||||
"*\n" +
|
||||
"* Unless required by applicable law or agreed to in writing, software\n" +
|
||||
'* distributed under the License is distributed on an "AS IS" BASIS,\n' +
|
||||
"* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n" +
|
||||
"* See the License for the specific language governing permissions and\n" +
|
||||
"* limitations under the License.\n" +
|
||||
"*/\n",
|
||||
pkg = grunt.file.readJSON("package.json");
|
||||
pkg = grunt.file.readJSON("package.json"),
|
||||
webpackConfig = require("./webpack.config.js"),
|
||||
BUILD_CONSTANTS = {
|
||||
COMPILE_TIME: JSON.stringify(compileTime),
|
||||
COMPILE_MSG: JSON.stringify(grunt.option("compile-msg") || grunt.option("msg") || ""),
|
||||
PKG_VERSION: JSON.stringify(pkg.version)
|
||||
};
|
||||
|
||||
/**
|
||||
* Compiles a production build of CyberChef into a single, portable web page.
|
||||
@ -150,104 +143,8 @@ module.exports = function (grunt) {
|
||||
}
|
||||
},
|
||||
webpack: {
|
||||
options: {
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery",
|
||||
moment: "moment-timezone"
|
||||
}),
|
||||
new webpack.BannerPlugin({
|
||||
banner: banner,
|
||||
raw: true,
|
||||
entryOnly: true
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
COMPILE_TIME: JSON.stringify(compileTime),
|
||||
COMPILE_MSG: JSON.stringify(grunt.option("compile-msg") || grunt.option("msg") || ""),
|
||||
PKG_VERSION: JSON.stringify(pkg.version)
|
||||
}),
|
||||
new ExtractTextPlugin("styles.css"),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
jquery: "jquery/src/jquery"
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "babel-loader?compact=false"
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
{ loader: "css-loader?minimize" },
|
||||
{ loader: "postcss-loader" },
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
{ loader: "css-loader?minimize" },
|
||||
{ loader: "postcss-loader" },
|
||||
{ loader: "less-loader" }
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(ico|eot|ttf|woff|woff2)$/,
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
limit: 10000
|
||||
}
|
||||
},
|
||||
{ // First party images are saved as files to be cached
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "images/[name].[ext]"
|
||||
}
|
||||
},
|
||||
{ // Third party images are inlined
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
exclude: /web\/static/,
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
limit: 10000
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
stats: {
|
||||
children: false,
|
||||
warningsFilter: /source-map/
|
||||
}
|
||||
},
|
||||
webDev: {
|
||||
target: "web",
|
||||
entry: "./src/web/index.js",
|
||||
output: {
|
||||
filename: "scripts.js",
|
||||
path: __dirname + "/build/dev"
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: "index.html",
|
||||
template: "./src/web/html/index.html",
|
||||
compileTime: compileTime,
|
||||
version: pkg.version,
|
||||
})
|
||||
],
|
||||
watch: true
|
||||
},
|
||||
webProd: {
|
||||
options: webpackConfig,
|
||||
web: {
|
||||
target: "web",
|
||||
entry: "./src/web/index.js",
|
||||
output: {
|
||||
@ -255,6 +152,7 @@ module.exports = function (grunt) {
|
||||
path: __dirname + "/build/prod"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin(BUILD_CONSTANTS),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
"screw_ie8": true,
|
||||
@ -310,6 +208,30 @@ module.exports = function (grunt) {
|
||||
}
|
||||
}
|
||||
},
|
||||
"webpack-dev-server": {
|
||||
options: {
|
||||
webpack: webpackConfig,
|
||||
stats: {
|
||||
children: false,
|
||||
warningsFilter: /source-map/
|
||||
},
|
||||
},
|
||||
start: {
|
||||
webpack: {
|
||||
target: "web",
|
||||
entry: "./src/web/index.js",
|
||||
plugins: [
|
||||
new webpack.DefinePlugin(BUILD_CONSTANTS),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: "index.html",
|
||||
template: "./src/web/html/index.html",
|
||||
compileTime: compileTime,
|
||||
version: pkg.version,
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
copy: {
|
||||
ghPages: {
|
||||
options: {
|
||||
|
||||
@ -60,7 +60,9 @@
|
||||
"style-loader": "^0.15.0",
|
||||
"url-loader": "^0.5.8",
|
||||
"web-resource-inliner": "^4.1.0",
|
||||
"webpack": "^2.2.1"
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-server": "^2.5.0",
|
||||
"worker-loader": "^0.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^3.3.7",
|
||||
@ -89,6 +91,7 @@
|
||||
"zlibjs": "^0.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "grunt dev",
|
||||
"build": "grunt prod",
|
||||
"test": "grunt test",
|
||||
"docs": "grunt docs"
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
<script type="application/javascript">
|
||||
// Load theme before the preloader is shown
|
||||
document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme;
|
||||
document.querySelector(":root").className = (JSON.parse(localStorage.getItem("options")) || {}).theme;
|
||||
|
||||
// Define loading messages
|
||||
const loadingMsgs = [
|
||||
|
||||
107
webpack.config.js
Normal file
107
webpack.config.js
Normal file
@ -0,0 +1,107 @@
|
||||
const webpack = require("webpack");
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
|
||||
/**
|
||||
* Webpack configuration details for use with Grunt.
|
||||
*
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2017
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
const banner = "/**\n" +
|
||||
"* CyberChef - The Cyber Swiss Army Knife\n" +
|
||||
"*\n" +
|
||||
"* @copyright Crown Copyright 2016\n" +
|
||||
"* @license Apache-2.0\n" +
|
||||
"*\n" +
|
||||
"* Copyright 2016 Crown Copyright\n" +
|
||||
"*\n" +
|
||||
'* Licensed under the Apache License, Version 2.0 (the "License");\n' +
|
||||
"* you may not use this file except in compliance with the License.\n" +
|
||||
"* You may obtain a copy of the License at\n" +
|
||||
"*\n" +
|
||||
"* http://www.apache.org/licenses/LICENSE-2.0\n" +
|
||||
"*\n" +
|
||||
"* Unless required by applicable law or agreed to in writing, software\n" +
|
||||
'* distributed under the License is distributed on an "AS IS" BASIS,\n' +
|
||||
"* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n" +
|
||||
"* See the License for the specific language governing permissions and\n" +
|
||||
"* limitations under the License.\n" +
|
||||
"*/\n";
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery",
|
||||
moment: "moment-timezone"
|
||||
}),
|
||||
new webpack.BannerPlugin({
|
||||
banner: banner,
|
||||
raw: true,
|
||||
entryOnly: true
|
||||
}),
|
||||
new ExtractTextPlugin("styles.css"),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
jquery: "jquery/src/jquery"
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "babel-loader?compact=false"
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
{ loader: "css-loader?minimize" },
|
||||
{ loader: "postcss-loader" },
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
{ loader: "css-loader?minimize" },
|
||||
{ loader: "postcss-loader" },
|
||||
{ loader: "less-loader" }
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(ico|eot|ttf|woff|woff2)$/,
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
limit: 10000
|
||||
}
|
||||
},
|
||||
{ // First party images are saved as files to be cached
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "images/[name].[ext]"
|
||||
}
|
||||
},
|
||||
{ // Third party images are inlined
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
exclude: /web\/static/,
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
limit: 10000
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
stats: {
|
||||
children: false,
|
||||
warningsFilter: /source-map/
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user