Directory structure

asset/

  • css/
  • img/

src/

  • entry.js ------------------------ Entrance file

.babelrc

index.html

package.json

webpack.config.js

Run the command

  1. Installation dependency :npm install
  2. Run the project :npm start

Configuration preview

package.json

{
"name": "react_webpack_demo",
"version": "1.0.0",
"description": "a demo using react and webpack",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --port 8080 --hot --inline --progress --colors --devtool eval"
},
"author": "Ruth",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.11.2",
"react-router": "^3.0.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
}
}

webpack.config.js

var webpack = require('webpack');
// css Separate packing , After using the plug-in, there is no need to configure style-loader 了 
// It was originally inline in the final web page , Now through outreach , Can be in /dist Find separate... In the folder css file
var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {
entry: {
index: './src/entry.js', // The only entry file
vendor: ['react'] // Here is the dependent library file configuration , and CommonsChunkPlugin It can be packed separately
},
output: {
path: '/dist', // Where packed files are stored
filename: 'bundle.js',
publicPath: 'http://localhost:8080/dist/' // The root directory after starting the local service
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.(js|jsx)$/,
loader: 'babel',
// It can be configured separately in the current directory .babelrc, It can also be configured here
query: {
// presets: ['es2015', 'react']
},
// exclude node_modules Files that don't need to be converted , Can speed up compilation
exclude: /node_modules/
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract("style", "css")
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass")
}, {
test: /\.(png|jpg|gif)$/,
loader: 'url?limit=819200'
}]
},
plugins: [
new ExtractTextPlugin('main.css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js'
})
]
};

.babelrc

{
"presets": [
"react",
"es2015"
],
"plugins": []
}

other

More other configurations are needed , Please refer to webpack_scaffold

github Address :react\_webpack\_scaffold

The resources

  1. Nuggets -react Search for

  2. 【 Data summary 】React ( chinese )

  3. React.js 2016 Best practices

  4. React.js course

  5. React.js Official website

  6. Very detailed React Introductory example

Postscript

In the process of configuration , Has been an error , I didn't install it myself babel-preset-es2015 and babel-preset-react, Cause even in .babelrc Error return has been configured in T_T, Please refer to Babel Introductory tutorial

Minimalist Edition react+webpack More about scaffolding

  1. Underscore Source code to read the minimalist version of the introduction

    Read some information on the Internet , I found that everyone wrote too complicated , It's hard for beginners to get started . So I wrote this minimalist version of Underscore Source code reading . Source code : https://github.com/hanzichi/underscore-an ...

  2. 200 Line code implementation simple version react🔥

    200 Line code implementation simple version react

  3. js Eliminate small games ( Minimalist Edition )

    js Mini game minimalist (1) Basic layout <div class = "box"> <p></p> <div class="div&qu ...

  4. SimpleThreadPool Minimalist Edition

    package com.dwz.concurrency.chapter13; import java.util.ArrayList; import java.util.LinkedList; impo ...

  5. Pure minimalist react State management component unstated

    brief introduction unstated It's a minimalist state management component Look at the profile :State so simple, it goes without saying contrast contrast redux: More flexible ( The relative disadvantage is the lack of rules , need ...

  6. react diff Minimalist Edition

    Why? react So fast  ? because react With virtual DOM: But every time it's virtual DOM To be true DOM It's also a waste of performance ? nice, So the key point is Diff Here's the algorithm , To compare the old with the new DOM Trees , And then update to the real through the patch ...

  7. Minimalist Edition ASP.NET Core Learning paths and tutorials

    Absolutely admit that this is a seven day crash course , Even with this effect , I don't want to accept the name either . Um. . This path is divided into two parts : Introduction to practice Theoretical extension With ASP.NET as well as C# Knowledge and project experience , We can do it almost without any new knowledge ...

  8. 【 Minimalist Edition 】SpringBoot+SpringData JPA Management system

    Preface Only a bald head can make it stronger . The text has been included in my GitHub Warehouse , welcome Star:https://github.com/ZhongFuCheng3y/3y In the last article, I explained how to build a SpringBo ...

  9. 【 Minimalist Edition 】OpenGL Super treasure ( The fifth edition ) Environment configuration VS2010

    Make a statement in advance : This tutorial only applies to VS2010 Configuration of the fifth edition of super classic in the environment First step : Download the sample code and environment package : link :https://pan.baidu.com/s/1llRRQ8ymBgMGuXp5M50pJw carry ...

Random recommendation

  1. kinect Learning notes ( Two )&mdash;&mdash; Sdk Platform construction ~、

    One . Download resources        Because of the kinect v1.0, So we just need to use 1.8 Version of sdk Just fine , And then the resource package , stay QQ The group's share already has , So you can download it directly . Two . Software installation        ...

  2. Linux Multithreaded programming ( There is no limit Linux)

    Preface Threads ? Why do we need threads when we have processes , What's the difference between them ? What are the advantages of using threads ? There are also some details of multithreading programming , Such as how to synchronize between threads . Mutually exclusive , These things will be introduced in this article . I'm somewhere QQ I see such an interview question in the group : Is it familiar ...

  3. javascript—— Event handling

    <script type="text/javascript"> function EventUtil() { var _self = this; /// Add event var ...

  4. In multithreading UI operation --ios Learning notes

    iOS It is not recommended to do this on a non main thread UI operation , In a non main thread UI There is a great chance that the operation will cause the program to crash , Or something unexpected . I didn't know that at first , Pop up operation is performed in the sub thread , As a result, the program went wrong ! The mistake is (EXC ...

  5. delphi Shortcut key

    ************************* 1. Function keys 2. Composite key 3. Other shortcuts 4. Add 5. Add 1( With classification ) 6. Add 2 --Edit by 2013.1.14 ************ ...

  6. So you are Promise

    1. Promise brief introduction promise Is a solution to asynchronous programming , The original intention of its emergence is to solve the problem of callback hell . For example , I need it : --( Delay 1s)--> Output 1 --( Delay 2s)--> Output 2 ...

  7. L181 The microscopic structure of a cat’s tongue helps keep its fur clean

    T.S. eliot's mystery cat, Macavity, besides being a criminal mastermind able to evade the combined r ...

  8. python Development _pickle

    pickle The data format used by the module is python A dedicated , And different versions are not backward compatible , At the same time, it can't be recognized by other languages . To interact with other languages , You can use the built-in json Package usage pickle You can put Python Object is saved directly to ...

  9. Understand distributed technology 11: Distributed session Solutions and consistency hash

    Understand distributed technology 11: Distributed session Solutions and consistency hash session Consistent architecture design practices original : 58 Shen Jian Architect's way 2017-05-18 One . origin What is? session? The server uses ...

  10. You don't know sticky

    position:sticky,Chrome The new version has done support .sticky The Chinese translation of is “ Sticky ”,position:sticky The performance is also consistent with the performance of stickiness . Basically , It can be seen that it is position:rela ...