Build react apps with Webpack

In the previous section, "Building React applications using Gulp+browserify", this article looks at the more powerful building tools--webpack. Let's take a look at Webpack's strong point introduction
1. Package css, pictures, and other resources in the same package
2. Pre-processing files prior to packaging (less, coffee, jsx, etc.)
3, according to the different import files to split your package into multiple packages
4, support the development environment of the special mark bit
5. Support Module code "hot" replacement
6. Support Asynchronous loading
?? Webpack not only helps you package all of your JavaScript files, but also has the resources you need for other applications. This design allows you to create a component that automatically contains all types of dependencies. Since all dependencies can be automatically included, the components become more portable. Even better, as the application continues to develop and modify, all its dependencies are automatically removed when you remove a component. This means that there will be no more unused CSS or pictures left in the code directory.
?? This article is mainly to write a webpack development of the basic framework , the subsequent writing react simple example, build Bar command, index.html do not need to change, only need to pay attention to./APP/JSX the JSX code for the component in the directory.
Source Address : Https://github.com/mqy1023/react-basejs/tree/master/src/dev-base/webpack

I. REACT PROJECT structure

/app   /jsx   index.htmlpackage.jsonwebpack.config.js.babelrc

Second, Webpack script

• 1. Create Package.json Management node package information file:npm init;

• 2, Package.json scripts script

    "scripts" : { "start" :  "Webpack-dev-server" ,//execute  ' n  pm Start equals execution  ' W  ebpack-dev-server to start the server  "prod" :  "webpack-p" //Execute  ' n  pm Run prod  equivalent to  ' W  ebpack-p "hit  package Command}  

• 3, react related libraries

  NPM Install React -- save; //react Core library  npm install React-dom  -- save; //react manipulating the DOM library   

• 4, Babel ---Compile JSX

  --save-dev babel-core;//babel核心--save-dev babel-loader;    //webpack中babel编译器--save-dev babel-preset-react;  //react的JSX编译成js

• 5, html-webpack-plugin --Modify the HTML file plugin
  npm install --save-dev html-webpack-plugin;

• 6. webpack Related Libraries
  Global installation Webpack: npm install webpack -g

  --save-dev//webpack核心--save-dev webpack-dev-server;  //webpack服务器

• 7, .babelrc --Set the Webpack loader loader (Babel compiler) rule

  {  "presets[    "react"  ]}

• 8, webpack.config.js --webpack configuration

varHtmlwebpackplugin =require(' Html-webpack-plugin ');varHtmlwebpackpluginconfig =NewHtmlwebpackplugin ({Template: __dirname +'/app/index.html ',//Specify HTML template directory pathFileName' index.html ',//New file nameInject' body ' //<script>[output's filename (index_bundle.js)]</script> found in body, but also in head}); module.exports = {entry: ['./app/js/app.jsx '    //app.js is the main entrance jsx], output: {//Specify output directory and output file name Index_bundle.jsPath: __dirname +'/dist ', FileName:"Index_bundle.js"}, module: {loaders: [//Regular: End with JSX; exclude node_modules directory; Babel loader{test:/\.jsx$/, Exclude:/node_modules/, loader:"Babel-loader"}]}, plugins: [Htmlwebpackpluginconfig]};

Third, web index.html

./app/index.html//html最轻量化，<script>都没有。//webpack配置中html-webpack-plugin插件自动插入转换并拼接后的js到<script>中

Iv. writing react jsx in the./APP/JSX directory

Where the modular management of the JSX, only need to Webpack.config.js entry configuration to specify the entrance APP.JSX

v. Use of

1. NPM Install
2. Build Commands

webpack     //执行一次开发时的编译-p      //执行一次生成环境的编译（压缩）-w  //在开发时持续监控增量编译（很快）//因为在package.json配置了script//相当于执行`webpack-dev-server`命令启动服务器//相当于执行`webpack -p`打包命令

Summary

index.html files and Webpack build package commands do not change, each time you develop react,
You only need to write the JSX code for the react component in the./app/jsx directory, App.jsx and the main entry JSX

Build react apps with Webpack