WEBPACK4.0+REACT16.0+ES6 Simple environment Setup and configuration

Webpack Reference Document: https://www.valentinog.com/blog/webpack-4-tutorial/

React: Reference Document: Https://reactjs.org/docs/add-react-to-a-new-app.html

ES6 Reference Document: http://www.ruanyifeng.com/blog/2017/09/es6_primer_3rd_edition.html

Let ' s start

First, install the operating environment: node. js

1. Application Download Address: https://nodejs.org/en/

NODE-V View node version (my v9.9.0v); npm-v my version (v5.7.1)

2. Install yarn-dependent package management tool

NPX install-g Yarn

Second, react application

1. Create react Simple Application

Run at the command line

NP Install-g Create-react-app (can be used to generate a simple react application that needs to be installed in the global environment)

Create-react-app webpack-react (Create react projects named Webpack-react name Custom)

The file structure is as follows:

2. Running React

CD Webpack-react

Yarn Start//Simple react is opened in the browser

Third, configuration Webpack

1. Install webpack dependencies, webpack some dependencies required for running

NPX Install Webpack webpack-cli webpack-dev-server--save-dev

2, install the ES6 transcoding device, es6 some new syntax features the old version of the browser can not be recognized, you need to convert it to ES5 syntax through a transcoding device.

NPM i babel-core babel-loader babel-preset-env--save-dev

3, configure transcoding files, create a new file named. BABELRC, the content is as follows:

{

"Presets": [

"React", "env", "stage-2"
]

}

3, Configuration Webpack

Create a new directory under the root directory Webpack, new three files in this directory one saves the underlying configuration, one for the development environment configuration, one for the production environment configuration

4. Configuring the Webpack.base.config.js File

ConstWebpack = require (' Webpack ');ConstPath = require (' path ');ConstHtmlwebpackplugin = require (' Html-webpack-plugin ');//html plugin, need to install dependencies NPM install Htmp-webpack-plugin--save-devConstMinicssextractplugin = require ("Mini-css-extract-plugin");//Compress CSS FilesModule.exports= {entry:{Main: Path.join (__dirname,".. /src/index.js "),//import fileCommon:[' react ',' React-dom ']
    },Output:{Path:p Ath.join (__dirname,".. /build "),//Export filefilename:"[Name].js],

    },Resolve:{Extensions:['. js ','. Jsx ',' JSON ','. css '],//file type to be compiled},Performance: {hints:false },Module:{rules:[
            {Test: /\. (JS|JSX)? $/,Exclude:/(Node_modules)/,Loader:' Babel-loader '//jsx js transcoding configuration },
            {Test:/\.css$/, Use: [Minicssextractplugin.Loader,' Css-loader '],//css transcoding, need to install dependency Css-loader},

{
    test:/\. (Scss|sass) $/, use
    : [
        minicssextractplugin.loader,
        {
        loader: ' css-loader '//translates CSS into CommonJS
    }, {
        loader: "Sass-loader"//compiles sass to CSS
    }]

},

{ Test:/\.html$/, Use:[ { Loader: ' Html-loader ', Options: { Minimize: true} } ] }, { Test: /\. (ICO) $/, Use: "Raw-loader",//Load ico file}, { Test: /\. (svg|png) $/, Use: ' File-loader ',//Load file}]}, Plugins:[ NewHtmlwebpackplugin ({ filename: "Index.html", Template: path. Join (__dirname, ".. /public/index.html ") }), NewMinicssextractplugin ({ filename: "[Name].css], Chunkfilename: "[Id].css] }) ]}

5. Configuring the Webpack.dev.config.js File

ConstWebpack = require ("Webpack");ConstPath = require ("Path");ConstMerge = require ("Webpack-merge");//File mergeConstWebpackconfigbase= Require ("./webpack.base.config");ConstOpenbrowserplugin = require (' Open-browser-webpack-plugin ');//Open the program in the browserConstWebpackconfigdev = {Mode:' development ',Plugins: [//New Openbrowserplugin ({URL: "http://localhost:8080"})],Devserver:{Contentbase: Path.join (__dirname,".. /public "), Hot:true,Host:' 0.0.0.0 ',inline:true,Port: 8080,}}Module.exports= Merge (Webpackconfigbase, Webpackconfigdev);

6. Configuring the Webpack.prod.config.js File

Webpack = require ("Webpack");
 Path = require ("path");
= Require ("./webpack.base.config");  
 Cleanwebpackplugin = require ("Clean-webpack-plugin");
 merge = require ("Webpack-merge");
 Webpackconfigprod = {
    mode"Production",
    plugins: [
         New  Cleanwebpackplugin (["Build"],{
        root: Path.join (__dirname,". /")
        })
    ]
};
module.  = merge (webpackconfigbase, Webpackconfigprod);

Some plugins and transcoding used in Webpack need to be installed on their own

7. Configuring the Package.json File

"Name": "React-app", "Version": "0.1.0", "private":true, "dependencies": {"Antd": "^3.4.0", "Node-sass": "^4.8.3", "React": "^16.2.0", "React-dom": "^16.2.0", "React-scripts": "1.1.1", "Remove": "^0.1.5", "Url-loader": "^1.0.1"}, "scripts": {"Start": "Webpac K-dev-server--hot--inline--color--hot--config./webpack/webpack.dev.config.js "," Build ":" Webpack--config./web
    Pack/webpack.prod.config.js "," Eject ":" React-scripts Eject "}," Devdependencies ": {" Babel-core ":" ^6.26.0 ", "Babel-loader": "^7.1.4", "Babel-plugin-import": "^1.6.7", "babel-preset-env": "^1.6.1", "Babel-preset-rea CT ":" ^6.24.1 "," babel-preset-stage-2 ":" ^6.24.1 "," Clean-webpack-plugin ":" ^0.1.19 "," Css-loader ":" ^0.28.11 " , "Extract-text-webpack-plugin": "^4.0.0-beta.0", "File-loader": "^1.1.11", "Html-loader": "^0.5.5", "html -webpack-plugin ":" ^3.0.6 "," Mini-css-extract-plugin ":" ^0.2.0 "," Open-browser-webpack-plugin ":" ^0.0.5 "," raw
    -loader ":" ^0.5.1 ","Sass-loader": "^6.0.7", "Webpack": "^4.2.0", "webpack-cli": "^2.0.13", "Webpack-dev-server": "^3.1.1", "W Ebpack-merge ":" ^4.1.2 "}}

8, the operating environment, the implementation of NPM START/NPM build can run the Webpack program

Code please check out my github:https://github.com/xiaoyaoyao/webpack-react.

Weekend Wood has a late-night write Oh Oh, remember to praise.