Webpack,react,babel

Source: Internet
Author: User
Tags webpack tutorial

First of all, now the Webpack tutorial has been many, the reason for writing this is because of their own in the beginning of the construction process, and did not find a better tutorial, spent a lot of time, so has this blog, convenient small white students to Learn.

Node environment is not described here, Package.json files are as follows

{  "name": "wn",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    " Start ":" webpack-dev-server--hot--inline "  },  " author ":" ",  " license ":" ISC ",  " devdependencies ": {    "babel-loader": "^6.2.4",    "babel-preset-es2015": "^6.13.2",    "babel-preset-react": "^6.11.1",    "css-loader": "^0.23.1",    "node-sass": "^3.8.0",    "react": "^15.3.0",    "react-dom": "^15.3.0",    "sass-loader": "^4.0.0",    "style-loader": "^0.13.1",    "stylus": "^0.54.5",    "stylus-loader": "^ 2.1.1 ",    " url-loader ":" ^0.5.7 ",    " webpack ":" ^1.13.1 ",    " webpack-dev-server ":" ^1.14.1 "  }}

There is a pit, is babel-preset-react this plug-in, babel-loader es2015 This plugin is parsing es6 syntax, babel-preset-react This plugin is parsing react syntax, This plugin is integrated into the es2015 in mac, but there is no integration in window, which causes the compilation to Fail.

Get this file and the direct command line NPM install is Complete. Ps: "start": "webpack-dev-server--hot--inline" This configuration is the command that is executed when NPM start is entered, This will start the localhost:8080 interface, which will be automatically refreshed after this page is Saved.

Next is the webpack.config.js file, which I wrote a lot of notes, not explained.

There is a list of loader on the official website, you can add your own use http://webpack.github.io/docs/list-of-loaders.html

Module.exports = {    //locate The source file location in log, as in sass sourcemap    devtool: ' source-map ',    //webpack-dev-server config    devserver: {        historyapifallback:true,        hot:true,        inline:true,        progress:true,    },    // Page Portal File configuration    entry: ' page/index.js ',    //ingress file output config    : {        filename: ' bundle.js '    },    Module: {        //loader configuration, These loader will parse files in different formats and then package them together into a JS file        loaders: [            {test:/\.css$/, loader: ' style-loader! Css-loader '},            {test:/\.scss$/, loader: ' style!css!sass?sourcemap '},            {test:/\.styl$/, loader: ' Style-loader!css-loader!stylus-loader '},            {test:/\. ( Png|jpg) $/, loader: ' url-loader?limit=8192 '},            {test:/\.js$/, loader: "babel-loader", query: {presets: [' es2015 ', ' React '}}        ]    },    //other solution configuration    resolve: {        //auto-extension file suffix name, meaning we require module can omit not to write suffix name        Extensions: [', '. js ', '. json ', '. scss ', '. styl '],    }};

Here is the homepage index.html

<! DOCTYPE html>

Index.js file

Import React from ' React ' import reactdom from ' react-dom ' Reactdom.render (  <div>hello world</div>  document.getElementById (' App ')

File directory

After executing npm start in the root directory, open the browser http://localhost:8080, the page will automatically refresh each time the file is modified, which is packaged in memory and will not generate a packaged technician File.

Bundle files are packaged after the Webpack command is Executed.

Next will add React-router and redux and other more advanced library, goodbye!

Webpack,react,babel

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.