1、新建目錄——>在dos視窗進入到目錄路徑下，輸入npm init   //進行初始化

初始化時packname和entry point（入口檔案）需要輸入值，其餘的可以不輸值

完成後1-1目錄下會生成一個package.json的配置檔案，裡面即是包的初始化資訊

1. 安裝必要的元件react-dom 和babelify

npm install --save react react-dom babelify babel-preset-react

再安裝babel es2015

npm install babel-preset-es2015 --save

1. 在專案根目錄下新建一個目錄，存放原始碼，比如入口檔案index.js——>在根目錄下新建一個index.html（引入index.js）

【index.js】

var React=require('react');

var ReactDom=require('react-dom');

ReactDom.render(

    <h1>hellow world!</h1>,

    document.getElementById("example") //這裡不能寫；

);

【index.html】

<div id="example">123</div>

此時執行會報錯，因為瀏覽器無法識別index.js中的語句，必須經過webpack打包

1. 在根目錄下新建一個webpack.config.js檔案（檔名是固定的）

var webpack=require('webpack');

var path=require('path'); //引入相關包

module.exports={

    context: __dirname+'/src',

    entry:"./js/index.js", //入口檔案

    module:{

        loaders:[{

            test: /\.js?$/, //解析所有的js檔案

            exclude: /(node_modules)/, //跳過node_modules資料夾

            loader: 'babel-loader',

            query: {

                presets: ['react','es2015']

            }

        }]

    },

    output: {

        path: __dirname+"/src/",

        filename: "bundle.js"

    }

};

1. 安裝webpack相關的包

先全域性安裝 npm install -g webpack

全域性安裝webpack安裝的伺服器 npm install -g webpack-dev-server

在再專案中安裝包

npm install webpack --save

npm install webpack-dev-server --save

1. 在dos下執行webpack

提示需要安裝webpack-cil

安裝好webpack-cil後繼續執行webpack再次報錯……

查閱資料，說是webpack版本過高引起的

npm檢視外掛版本列表：npm view 外掛名 versions

重新安裝webpack 3.1.0的版本，然後又出現了錯誤……

在dos中繼續輸入npm install babel-loader --save

生成了bundle.js，不過又有一大堆錯誤

然後輸入

npm install --save-dev @babel/core，執行webpack報錯……

npm install -g [email protected]，繼續報錯……

嗯……還是版本問題，參考網址https://www.cnblogs.com/jiebba/p/9618930.html

我packag.json中的babel-cli版本是6.26.0，而babel-loader是8點多，因此繼續在dos中輸入

npm install [email protected] --save，再次執行webpack，終於沒有報錯了，前臺也正確執行出hello world了……