步驟： 首先保證有node 和 npm環境。運行node -v 和npm -v查看版本號來確定

註意：

初始化npm環境並安裝插件：

沒有項目：想在Window命令下創建項目

有項目：cd 到相應的項目

進入之後，運行npm init （初始化）按照步驟依次確認 yes

最終生成package.json文件.

所有使用npm做的依賴管理項目，根目錄下都會有一個這個文件，該文件

描述了項目的基本信息以及一些第三方依賴插件

安裝插件

使用 webpack 作為構建工具，需要安裝相應插件，運行 npm install webpack

安裝之後最好查看版本號：如果太低,以下的webpack配置目前支持2.0版本以下的版本。

想要3.0以上的是組件化方式配置：升級方式：

npm update webpack --dev -save

或者：yarn update webpack --dev -save （如果安裝了yarn推薦）

webpack-dev-server --save-dev 來安裝兩個插件。

webpack-dev-server 這是webpack開發的運行環境

安裝成功如下圖：

使用 react ，安裝相應插件，運行 npm i react react-dom --save來安裝兩個插件。

安裝成功如下圖：

Webpack和react都安裝完成之後，查看package.json可看到多了devDependencies和dependencies兩項，根目錄也多了一個node_modules文件夾。

devDependencies要下載多個開發依賴包。不用一個個下載。

把需要的開發依賴復制到package.json裏面：

執行npm install

如果報錯，一種可能性是node版本過低。沒有裝yarn解決方案可以嘗試：

先下載 yarn 執行npm i yarn -g

完成之後執行 yarn install即可；

配置webpack.config.js

webpack.config.js和webpack.production.config.js兩個文件可以引入現有成熟的版本。目前引入的版本僅支持webpack 2.0以下的版本

webpack.config.js

node命令require我們安裝的webpack查找的是main 下面的這個js文件

Entry入口文件：需要新建./app/index.jsx作為入口文件，目前項目中只有這一個入口文件。

Output輸出就是一個bundle.js，js 和 css 都在裏面，發布代碼的時候才會出現。

Resolve 拓展：表示支持三種格式。“ ”是index.js 後綴可以省略

不同類型的文件，使用不同的loader

Loaders是我們引入別人配置文件要修改的主要的部分。需要啥。寫啥

一般不用。超級嚴格模式。缺冒號等等都會報錯

在app目錄下也要新建index.tmpl.html頁面

所有配置文件準備好

在 package.json 中，windows中將下圖所示命令封裝為npm start，然後運行npm start或者yarn start

失敗的原因：看一下是不是安裝的webpack的版本是2.0以下的。和package.json中webpack的版本號是一致的

報錯原因：引入了別人的依賴包有less或者sass

解決方案就是：先執行 npm install node-gyp -g

還要安裝.net或者visual studio 2013（desk）

前端新手如何搭建webpack+react的開發環境