mirror of
https://github.com/scottlamb/moonfire-nvr.git
synced 2024-12-25 14:45:54 -05:00
Changes to allow active development of UI using webpack and hotloading. (#22)
* Changes to allow active development of UI using webpack and hotloading. * Update to webpack 4 (will make this work) * Update webpack.config.js accordingly * Move webpack.config.js to its own directory * Split webpack.config.js into base.config.js, dev.config.js and prod.config.js * Update configs to be "right" for development vs production using --mode * Want configuration through (optional) local file that is not checked in * Updated package.json for newer babel-loader * Put in a proxy to localhost port 8080 for evelopment server. This allows "yarn start" to work on the machine where MoonFire's server is running. This would be the default situation. Users in a different setup can change the proxy settings.
This commit is contained in:
parent
e4cc8d6c0f
commit
a03b98631a
20
package.json
20
package.json
@ -4,13 +4,14 @@
|
||||
"url": "https://github.com/scottlamb/moonfire-nvr/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "scripts/clean.sh",
|
||||
"build": "webpack && ln -f ui-src/index.html ui-dist/"
|
||||
"start": "webpack-dev-server --mode development --config webpack/dev.config.js --progress",
|
||||
"build": "webpack --mode production --config webpack/prod.config.js && cp ui-src/index.html ui-dist/"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.2.1",
|
||||
"jquery-ui": "^1.12.1",
|
||||
"moment-timezone": "^0.5.13"
|
||||
"moment-timezone": "^0.5.13",
|
||||
"webpack-merge": "^4.1.2"
|
||||
},
|
||||
"homepage": "https://github.com/scottlamb/moonfire-nvr",
|
||||
"license": "GPL-3.0",
|
||||
@ -19,12 +20,15 @@
|
||||
"version": "0.1.0",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-minify-webpack-plugin": "^0.2.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-minify-webpack-plugin": "^0.3.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"css-loader": "^0.28.7",
|
||||
"file-loader": "^1.1.5",
|
||||
"clean-webpack-plugin": "^0.1.18",
|
||||
"css-loader": "^0.28.10",
|
||||
"file-loader": "^1.1.11",
|
||||
"style-loader": "^0.19.0",
|
||||
"webpack": "3.8.1"
|
||||
"webpack": "^4.0.1",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
}
|
||||
}
|
||||
|
42
webpack/base.config.js
Normal file
42
webpack/base.config.js
Normal file
@ -0,0 +1,42 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
|
||||
const project_root = path.join(__dirname, '../');
|
||||
const src_dir = path.join(project_root, 'ui-src');
|
||||
const dist_dir = path.join(project_root, 'ui-dist');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
nvr: path.join(src_dir, 'index.js'),
|
||||
},
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(dist_dir),
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
query: {
|
||||
'presets': ['env', {}],
|
||||
},
|
||||
include: [path.resolve(__dirname, './ui-src'), path.resolve(__dirname, './ui-src/lib')],
|
||||
}, {
|
||||
test: /\.png$/,
|
||||
use: ['file-loader'],
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
loader: 'style-loader!css-loader',
|
||||
}],
|
||||
},
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/\.\/locale$/),
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/node_modules\/moment\/moment\.js$/,
|
||||
'./min/moment.min.js'),
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/node_modules\/moment-timezone\/index\.js$/,
|
||||
'./builds/moment-timezone-with-data-2012-2022.min.js'),
|
||||
],
|
||||
};
|
26
webpack/dev.config.js
Normal file
26
webpack/dev.config.js
Normal file
@ -0,0 +1,26 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const merge = require('webpack-merge');
|
||||
|
||||
const baseConfig = require('./base.config.js');
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
devtool: 'inline-source-map',
|
||||
devServer: {
|
||||
contentBase: './ui-src',
|
||||
historyApiFallback: true,
|
||||
inline: true,
|
||||
port: 3000,
|
||||
hot: true,
|
||||
clientLogLevel: 'info',
|
||||
proxy: {
|
||||
'/api': 'http://localhost:8080'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
});
|
15
webpack/prod.config.js
Normal file
15
webpack/prod.config.js
Normal file
@ -0,0 +1,15 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const merge = require('webpack-merge');
|
||||
const baseConfig = require('./base.config.js');
|
||||
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production'),
|
||||
}),
|
||||
new CleanWebpackPlugin(['ui-dist'], { root: path.resolve(__dirname, '../') }),
|
||||
],
|
||||
});
|
Loading…
Reference in New Issue
Block a user