Teach you to build react projects with WEBPACK3 (development environment and production environment) (i)

Development environment and production environment the entire configuration source code on GitHub, source address: github-webpack-react If feel helpful, point a star thank you!!

(a) is the development environment, (b ) is the production environment.

First, create Package.json and install Webpack and Webpack-dev-server

Don't write anything, just help you create the simplest Package.json file
NPM init---save-dev webpack webpack-dev-server

As long as the download is a tool class, need--save-dev, project dependencies such as: react these do not need to write--save-dev

Next, start configuring the items that need to be configured for a complete project. Put out my project directory first

Ii. Webpack inlet, outlet and Devserver configuration

var path = require (' path ');//node provides a piece of method
var webpack = require (' Webpack ');
var htmlwebpackplugin = require (' Html-webpack-plugin ');

Module.exports = {

Entry: './src/index.jsx ',                      //This is the import file output              : {' dist '),//After the file is packaged FileName: ' bundle.js ',                   // output file name, development environment directly fixed the output name },

devserver:{
Contentbase: './dist ',//Specify the location where the service is open, in the Dist folder
Historyapifallback:true,//Do not jump, very useful in developing a single page application, it relies on the HTML5 history API, if set to true, any 404 response may need to be replaced by index.html
Inline:true,//real-time Refresh
port:8000,//default 8080
proxy:{//Agent Properties
"/api": {
Target: ' Http://localhost:9000/',
Pathrewrite: {"^/api": ""}
/* Because the URL of the AJAX prefix '/api ', and the original interface is not the prefix
So we need to rewrite the address via pathrewrite, and convert the prefix '/api ' to ' * *
}
}
}

}

Iii. Configuring the compilation of JS,ES6 and JSX

JS Loader loader also has ES6 to ES5, if react development need to download babel-preset-react
NPM Install Babel-core babel-loader babel-preset-env babel-preset-react--save-dev
Babel related plug-in configuration
NPM Install--save-dev babel-plugin-transform-runtime babel-preset-stage-0

The configuration is as follows:

 {     /\.( JS|JSX) $/,           //Match all JS and jsx      exclude:/node_modules/,//       except for this folder use      : {          " Babel-loader "    //babel related configuration in. babelrc file        }  }

The configuration of the. babelrc file is as follows

{  "presets": [    "env",    "React",    "stage-0"   ],  "plugins": ["Transform-runtime"]}

To learn more about Babel's configuration, you can view the translation of the English version of this article connection address: https://excaliburhan.com/post/babel-preset-and-plugins.html

Iv. configuration of Css,sass,postcss and Autoprefixer

CSS for loader converters and style loader converters
NPM Install--save-dev Css-loader style-loader
Because Sass-loader relies on node-sass, it also installs Node-sass,postcss-loader autoprefixer postcss add browser compatibility
NPM Install--save-dev sass-loader node-sass postcss-loader autoprefixer postcss

The configuration is as follows

//Configure CSS{test:/\.css$/,Use : [' Style-loader ', {loader:' Css-loader ',, Options: {importloaders:1}}, {loader:' Postcss-loader ', options:{ident: "Postcss", Plugins:[require ("Autoprefixer") ("Last Versions")]}}       ] }, //Configuration Scss Execution order is from right to left this order cannot be changed{test:/\.scss$/,Use : [' Style-loader ', {loader:' Css-loader ', options: {importloaders:2}}, 2 loader {Loader are required after//css-loader:' Postcss-loader ', options:{ident: "Postcss", Plugins:[require ("Autoprefixer") ("Last Versions")]}},              ' Sass-loader '             ]   }

For POSTCSS configuration details, you can view one of my other blogs: Webpack3 using Postcss-loader and autoprefixer to add browser compatibility to CSS3 styles

V. Configure picture and Font icons

NPM Install--save-dev Url-loader

Url-loader mainly in order to solve the image too much, the increase in HTTP requests caused performance degradation, his main principle is to introduce the image encoding, generate Dataurl. Equivalent to translating the image data into a string of characters. This string of characters into the file, and finally only need to introduce this file to access the picture, the official website describes Url-loader encapsulated File-loader (this loader the main user to a file without any processing knowledge transfer location), This reflects the role of the Url-loader limit parameter, The specific work step is 1. The file size is less than the limit parameter, and Url-loader will convert the file to dataurl;2. The file size is greater than Limit,url-loader will call file-loader for processing, and the parameters will be passed directly to File-loader. So we just need to install Url-loader.

Configured as follows

 //Configure picture{test:/\. (jpg|png|gif|jpeg|bmp) $/, use:{loader:' Url-loader ', Options: {limit:8192//limit the size of a picture                    }          }  },   //Configure font Icons{test:/\. (WOFF|WOFF2|SVG|TTF|EOT) $/, use:{loader:' Url-loader ', Options: {limit:10000,//development environment It's big enough to pack the font icon directly into a file, and the development environment needs to be packaged separately. The next section will say                 }           }   },

Want to know the specific can see I wrote another article: Webpack3 Configuring font icons and packaging related issues

Six, the last step to use the plugin Html-webpack-plugin

NPM Install--save-dev Html-webpack-plugin

The function of this plugin is to generate HTML, and will automatically help you to put the packaged static file into the HTML.

Configured as follows

will be the template in my project inde.template.html, will generate index.html under the Dist path and reference all the static resources. The project output path is dist.
New  htmlwebpackplugin ({     

})　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

The configuration in the development environment with the above steps has been configured so I added the following in the Package.json file:

"Scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "Start": " Webpack-dev-server--hot--colors--inline--open ",  //directly execute NPM Start Project opens, default is Webpack.config.js     "Build": "Rimraf Dist && webpack--config webpack.dev.js"      //npm Run Build Package Project Delete Dist folder First, Then run the Webpack.dev.js  }

The direct npm start project is now open

Development environment and production environment the entire configuration source code on GitHub, source address: github-webpack-react If feel helpful, point a star thank you!!

Related articles:

Webpack3 Configuring font icons and packaging related issues webpack the difference between hash and chunkhash and the problems needing attention

Teach you to build react projects with WEBPACK3 (development environment and production environment) (i)