problem description
webpack is not compiled in the production environment, but the local environment compilation is 17.5m.
put it on the server and run it. It won"t load at all. It"s always a white screen. I hope there is a way to make my project at least run.
compile screenshot
I tried it today, and it was reduced to 13.8
.thanks
webpack configuration
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var proxy = require("http-proxy-middleware");
let WEBPACK_ENV = process.env.WEBPACK_ENV || "dev";
console.log(WEBPACK_ENV);
const context2 = [`/api/task/`, `/api/account`, `/api/api-token-auth`, `/api/cluster/`];
const context1 = [`/api/account`];
module.exports = {
entry: "./src/app.jsx",
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
filename: "js/app.js"
},
resolve: {
alias: {
page: path.resolve(__dirname, "src/page"),
component: path.resolve(__dirname, "src/component"),
service: path.resolve(__dirname, "src/service"),
util: path.resolve(__dirname, "src/util"),
}
},
module: {
rules: [
// react(jsx)
{
test: /\.(jsx|js)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react", "stage-0"],
plugins: [require("babel-plugin-transform-object-rest-spread")]
}
}
},
// css
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// sass
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
//
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
name: "resource/[name].[ext]"
}
}
]
},
//
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
name: "resource/[name].[ext]"
}
}
]
}
]
},
plugins: [
// html
new HtmlWebpackPlugin({
template: "./src/index.html",
favicon: "./favicon.ico"
}),
// css
new ExtractTextPlugin("css/[name].css"),
//
new webpack.optimize.CommonsChunkPlugin({
name: "common",
filename: "js/base.js"
}),
],
devServer: {
port: 8001,
host: "0.0.0.0",
historyApiFallback: {
index: "/dist/index.html"
},
proxy: [
{
context: context1,
target: "http://www.simplehpc.com",
changeOrigin: true,
secure: false
}, {
context: context2,
target: "http://api_sjtu001.simplehpc.com",
changeOrigin: true,
secure: false
}
]
}
};
Code in app.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Redirect, Route } from "react-router-dom"
import Layout from "component/layout/index.jsx";
//
import Home from "page/home/index.jsx";
import Storage from "page/storage/index.jsx";
import Net from "page/net/index.jsx";
import Application from "page/application/index.jsx";
import Login from "page/login/index.js";
import UserSubmit from "page/user/userSubmit";
import UserList from "page/user/index.jsx";
import GroupList from "page/group/index.jsx";
import ErrorPage from "page/error/index.jsx";
import NodeList from "page/pbs/nodelist.jsx";
import TaskList from "page/pbs/tasklist/index.jsx";
import Cluster from "page/cluster/index.js";
import Mirror from "page/mirror";
import "./app.css";
class App extends React.Component{
render(){
let LayoutRouter = (
<Layout>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/net" component={Net}/>
<Route path="/mirror" component={Mirror}/>
<Route path="/storage/:name" component={Storage}/>
<Route path="/app" component={Application}/>
<Route path="/node/index" component={NodeList}/>
<Route path="/task/index" component={TaskList}/>
<Route path="/user/index" component={UserList}/>
<Route path="/group/index" component={GroupList}/>
<Route path="/cluster/:name" component={Cluster}/>
<Redirect exact from="/user" to="/user/index"/>
<Route component={ErrorPage}/>
</Switch>
</Layout>
);
return (
<Router>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/user-submit" component={UserSubmit}/>
<Route path="/" render={ props => LayoutRouter}/>
</Switch>
</Router>
)
}
}
ReactDOM.render(
<App />,
document.getElementById("app")
);