Web3 with Webpack Build not found without webpack-dev-server

Question

With a Reactjs webpack project I am able to run webpack dev server and access my index.html with web3 picked up.

If I build the project and open the index.html in Chrome then web3 is not detected.

Everything works when running webpack-dev-server --mode development --open --hot but with webpack --mode development then web3 is not injected.

The purpose of my app is a tool to be run locally, it does not have to be served from anywhere public, also I don't see that I need to run a lite server to serve the content.

• web3: 1.0.0-beta.36

• webpack: 4.22.0

• webpack-cli: 3.1.2

• webpack-dev-server: 3.1.8

   import './index.css';
   import IxoTimelockApp from './components/IxoTimelockApp';
   import InstallMetaMask from './components/install- 
   metamask/install-metamask-component.jsx';
   let regeneratorRuntime =  require("regenerator-runtime");
   class App extends Component {
  
   state = {
       web3Obj:null
   }
   componentDidUpdate(prevprops) {
       if (prevprops != this.props){
           this.setState({web3Obj: this.props.web3Obj})
       }
   }
   componentDidMount(){
       window.addEventListener('load', async () => {
           // Modern dapp browsers...
           if (window.ethereum) {
               window.web3 = new Web3(ethereum);
               try {
                   // Request account access if needed
                   await ethereum.enable();
                   this.setState({web3Obj: window.web3})
               } catch (error) {
                   // User denied account access...
               }
           }
           // Legacy dapp browsers...
           else if (window.web3) {
               window.web3 = new Web3(web3.currentProvider);
               this.setState({web3Obj: window.web3})
           }
           // Non-dapp browsers...
           else {
               console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
           }
       });
   }
  
  
   render() {
        if(this.state.web3Obj) {
           return <TimelockApp/>
       }else return <InstallMetaMask/>
   }
   }
  
  
  
   export default App;
  
   const wrapper = document.getElementById("root");
   wrapper ? ReactDOM.render(<App />, wrapper) : false;
  

Answer 1

From: MetaMask Compatibility Guide

Requirements

Http(s) - Web Server Required

Due to browser security restrictions, we can't communicate with dapps running on file://. Please use a local server for development.