From ff78c72d54dee7c41e3d28a04b08c3b509854fde Mon Sep 17 00:00:00 2001 From: n1474335 Date: Mon, 3 Jul 2017 23:15:57 +0100 Subject: [PATCH 01/19] Configured webpack-dev-server --- Gruntfile.js | 166 +++++++++++----------------------------- package.json | 5 +- src/web/html/index.html | 2 +- webpack.config.js | 107 ++++++++++++++++++++++++++ 4 files changed, 156 insertions(+), 124 deletions(-) create mode 100644 webpack.config.js diff --git a/Gruntfile.js b/Gruntfile.js index 42cd5923..2c896c9f 100755 --- a/Gruntfile.js +++ b/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: { diff --git a/package.json b/package.json index f37f376c..4b8d9c6d 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/web/html/index.html b/src/web/html/index.html index 0d2d4246..69ea7139 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -33,7 +33,7 @@