Webpack installation record

There are still problems with the installation of Webpack. I'm not familiar with it. First, paste up the main running code to make a record, and then publish the latest one after testing.

1) Create a new web pack experiment folder 01-13
2) Enter project initialization in directory (npm init)
3) You can return all the way (entry point:index.js)
4) Project dependency package installation

npm install --save react react-dom babelify babel-preset-react
npm install babel-preset-es2015 --save

5) Naming must be standardized
index.html

<div id="example">123</div>

src/js/index.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(<h1>Hello world!</h1>,document.getElementById('example'));

6) 1-12/webpack.config.js (note that the file name should be written correctly)

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

7) Run code

 npm install -g webpack
 npm install -g webpack-dev-server
 npm install webpack-dev-server --save
 npm install webpack --save

8) Run webpack (all four are OK)

webpack
webpack --watch
webpack-dev-server Path of copy generation
webpack-dev-server --contentbase -src --inline --hot

Relatively speaking, the create react app is simpler and only needs three steps

npx create-react-app [file name]
cd [file name]
npm start

Get to know React

/public/index.html

<div id="example">Test content</div>
<script src="./src/bundle.js"></script>

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js';

class Index extends React.Component{
  render(){
    return (
      <div>
        <ComponentHeader/>
        <IndexBody/>
        <ComponentFooter/>
      </div>
    );
  }
}
ReactDOM.render(<Index/>,document.getElementById('example'));

/src/header.js

var React = require('react');

export default class ComponentHeader extends React.Component{
  render() {
    return (
      <header>
        <h1>This is the header</h1>
      </header>
    )
  }
}

/src/body.js

var React = require('react');

export default class IndexBody extends React.Component{
  render() {
    return (
      <div>
        <h1>This is something that hasn't been seen for a long time</h1>
      </div>
    )
  }
}

/src/footer.js

var React = require('react');

export default class ComponentFooter extends React.Component{
  render() {
    return (
      <footer>
        <h1>This is the footer</h1>
      </footer>
    )
  }
}

Here is a summary of my problems
1)

This is because npm start is not running on the project path.
resolvent:

cd [Project name]
npm start

2)


This is because the path template of create react app needs to be strictly followed

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Solution: change the path
3)

This is because the code is wrong. Here's what's right

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js';

4)
This is because

import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js'; 

Cannot write other service codes before
Can be changed to

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js';

5)

Obviously, like the error prompt, there is a problem with the inherited class.
That is, React.Component

class Index extends React.Component{
  render(){
    return (
      <div>
        <ComponentHeader/>
        <IndexBody/>
        <ComponentFooter/>
      </div>
    );
  }
}

Write in the back, no matter how simple the code is, you should run before you practice, and remember to look ahead to what you want.

Tags: React Webpack npm JSON

Posted on Thu, 30 Apr 2020 10:56:45 -0700 by fxmzb123