Commit b6aea554 authored by David Haynes's avatar David Haynes 🙆

Happier webpacking

- dynamic index page (no more static define of bundle / react)
- hot reload done right
- /dist actually made and cleaned every build
- pedantic fixes
parent 739fd91a
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Schedules</title>
</head>
<head>
<meta charset="UTF-8" />
<title>Schedules</title>
</head>
<body>
<div id="root"></div>
<body>
<div id="root"></div>
</body>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
\ No newline at end of file
</html>
......@@ -3,9 +3,9 @@
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no tests specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
"build": "webpack --config webpack.config.js --debug --progress --mode development",
"start": "webpack-dev-server --inline",
"prod": "webpack --config webpack.config.js --debug --progress --mode production"
},
"license": "Apache",
"private": true,
......@@ -22,7 +22,9 @@
"dependencies": {
"@types/react": "^16.3.12",
"@types/react-dom": "^16.0.5",
"clean-webpack-plugin": "^0.1.19",
"file-saver": "^1.3.8",
"html-webpack-plugin": "^3.2.0",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
......
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: "./index.html",
filename: "index.html",
inject: "body"
});
module.exports = {
mode: "development",
devtool: 'source-map',
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist'),
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
extensions: ['.js', '.json', '.ts', '.tsx'],
},
module: {
rules: [
{
rules: [{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/,
},
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
},
],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(["dist"]),
HtmlWebpackPluginConfig
],
devServer: {
contentBase: path.resolve(__dirname, "dist"),
compress: true,
port: 8080,
hot: true,
publicPath: '/dist/',
},
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
mode: 'development',
publicPath: "/",
historyApiFallback: true
}
};
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment