Skip to content

Instantly share code, notes, and snippets.

@vitalyster vitalyster/index.html
Last active Jun 27, 2018

Embed
What would you like to do?
webpack-command-issue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body id="body">
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
function App(props) {
return (<p>Hello, World!</p>);
}
ReactDOM.render(<App />, document.getElementById('root'));
p {
color: green;
}
{
"name": "App",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "jest",
"dist": "webpack -p",
"start": "webpack-serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^23.2.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"connect-history-api-fallback": "^1.5.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"internal-ip": "^3.0.1",
"jest": "^23.2.0",
"koa-connect": "^2.0.1",
"mini-css-extract-plugin": "^0.4.0",
"optimize-css-assets-webpack-plugin": "^4.0.2",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.2",
"react-test-renderer": "^16.4.1",
"style-loader": "^0.21.0",
"webpack": "^4.12.1",
"webpack-command": "^0.3.0",
"webpack-serve": "^1.0.4"
},
"babel": {
"plugins": [
[
"transform-class-properties",
{
"spec": true
}
]
],
"presets": [
"env",
"react"
]
},
"dependencies": {
"axios": "^0.18.0",
"moment": "^2.22.2",
"query-string": "^6.1.0",
"react": "^16.4.1",
"react-content-loader": "^3.1.2",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1"
}
}
const webpack = require('webpack');
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const history = require('connect-history-api-fallback');
const convert = require('koa-connect');
const internalIp = require('internal-ip');
module.exports = {
devtool: process.env.WEBPACK_SERVE ? 'source-map' : false,
mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
entry: {
'App': [
__dirname + '/index.js',
__dirname + '/main.css'
]
},
output: {
filename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[chunkhash].bundle.js',
chunkFilename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[chunkhash].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "postcss-loader", options: {
plugins: () => [
require('autoprefixer')({
browsers: 'last 4 versions, > 1%, ie >= 8'
})
]
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]'
]
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: Boolean(process.env.WEBPACK_SERVE)
}),
new OptimizeCSSAssetsPlugin({})
],
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
enforce: true
},
}
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new MiniCssExtractPlugin({
filename: "App.[contenthash].css",
allChunks: true
}),
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
})
],
};
module.exports.serve = {
content: [__dirname],
host: internalIp.v4.sync(),
add: (app, middleware, options) => {
const historyOptions = {
// ... see: https://github.com/bripkens/connect-history-api-fallback#options
};
app.use(convert(history(historyOptions)));
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.