使用webpack 手動建立新react專案

well2049發表於2017-09-12
WebReact

雖然，react官方給的建立新專案的方式很簡單。直接create-react-app  my-app 就能自動生成一個react專案，當然如果你用這種方式遇到npm   4048 的錯誤，恭喜中獎了。不得不說用win搞開發有點痛苦，各種問題。4048的錯誤解決方案是建立一個新使用者，開發各種許可權。4048就是許可權的問題。為啥要手動創新呢，因為還需要用到各種外掛和配置，所以，我就總結一下，以作記錄。

一：建立一個新的專案資料夾，在新資料夾使用shift + 右鍵 選擇在此處開啟shell視窗，執行命令：npm init 

初始化時有提示設定，基本上直接回車就全部解決了，建立完以後資料夾多一個package.json，說明建立成功。

二：先安裝4個一個包，執行命令：npm  install --save react react-dom babelify babel-preset-react

安裝完成後，在package.json檢視一下是否成功。如圖


三：繼續安裝依賴：執行命令:   npm install --save babel-preset-es2015

也就是對es2015的支援外掛。

四：手動建立一個inex.html     一個src資料夾，一個webpack.config.js   在src資料夾建立js資料夾在這裡建立一個index.js.

index.html 的內容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>my react webpack</title>
</head>

<body>
 <div id="root">555</div>
 <script type="text/javascript" src="./src/bundle.js"></script>
</body>

</html>
webpack.config.js 的內容如下：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: __dirname,
  entry: "./src/js/index.js",
  module: {
    loaders: [
        {
          test: /\.js?$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015']
          }
        }
      ]

  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  }

};
index.js  的內容如下：
var React = require('react');
 var ReactDOM = require('react-dom');
ReactDOM.render(
	<div>
  		<h1>Hello, world!005555222</h1>

  	</div>,
  document.getElementById('root')
);
五：全域性安裝webpack和server執行命令： npm install -g webpack   和 npm install -g webpack-dev-server .
執行完記得到pack.json 裡面檢視一下。

六：在專案裡面安裝webpack  和server :執行命令： npm install --save webpack   和 npm install --save webpack-dev-server .  這兩個命令執行完後再執行一個：npm install --save babel-loader


七：執行命令：webpack    編譯完成後會在src資料夾多一個bundle.js   再執行一個熱載入：webpack --watch 

這就是隻要你的文件傳送變化，webpack就會重新編譯，瀏覽器就會自動重新整理了。


八：在專案文件裡面再開啟一個shell視窗，不要關閉上一個執行了熱載入的命令視窗。

在新shell執行命令：webpack-dev-server 成功以後看到這個


OK 就這樣建立完了。雖然麻煩，但是，自己就可以單獨配置各種外掛了，比如css模組化，等。。。

相關文章