近期一直在學習使用react，雖然網上看到很多關於react不好或者怎麼樣的新聞，但是作為一個前端開發的菜鳥級選手，還是需要學習一下react的，學習react首先就得搭建react的環境，現在前端發展這麼快，如果還不會前端自動化的話，那就真的要被淘汰了，所以本篇旨在給那些還在用script標籤引入的同學一點啟發，同時也作為自己日後react開發的一個隨時檢視的資料，話不多說，先來看看我們需要通過npm下載的一些東西，webpack,webpack-cli,react,react-dom,babel-core,babel-preset-es2015,babel-preset-env,babel-preset-react

npm install --save react react-dom

--save的命令列是指的開發以後還需要依賴的模組，即像是jquey這樣的第三方庫，完成專案後依然還需要依賴的模組

npm install --save-dev webpack webpack-cli babel-core babel-preset-react babel-preset-env

--save-dev下載的即是開發時依賴的模組，具體下載完以後可以在 package.jso裡面看到所以下載的依賴。

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}
 

    上面則是package的檔案，也可以自己寫這個配置，寫完以後npm install 就可以下載以上所有的依賴。迴歸主題，理解webpack重要的幾個用到的概念，出口，入口，除錯，外掛，web伺服器，loader載入器，入口就是你的主檔案的路徑，裡面包含了所有的其他依賴，webpack會根據你的入口檔案，來找到對應的依賴，出口檔案即打包所有模組以後的檔案路徑及檔名稱，配置都是物件鍵值對形式。再來看除錯方法配置就是devtool，一般開發過程中用的就是eval-source-map這個模式，還有很多其他的模式，大家可以去官網看看。

   最後個人覺得比較難以理解的部分其實就是外掛和loader載入器比較複雜，所謂loader載入器可以理解為一個外掛，因為webpack只能處理js的檔案，對於其他的檔案，就需要有一種方法來轉換成js，所以才有了loader的概念。loader也有自己的配置，並且GitHub上有非常多的loader可以配置，這裡我們只需要幾種常用的loader就可以了，首先還是先下載

npm install --save-dev babel-loader css-loader style-loader file-loader

看名字大概也能猜到意思，分別是處理css檔案，ES6的程式碼，還有處理圖片檔案的file-loader,具體配置如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	devtool: 'eval-source-map',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	devServer: {
		contentBase: './public',
		hot: true
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new HtmlWebpackPlugin({
			template: './public/index.html',
			inject: true
		})
	],
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader','css-loader']
			},
			{
				test: /\.(gif|jpg|svg|eot)$/,
				use: 'file-loader'
			},
			{
				test: /\.(jsx|js)$/,
				use: 'babel-loader',
				exclude: '/node_modules/'
			}
		]
	}
}

這其實就是一個webpack4.0的基本配置了，雖然4.0也是可以零配置就能執行，但是很多時候還是需要經過配置才能更好的完成任務的，對於連除錯瀏覽器重新整理都覺得麻煩的同學就特別適合這個配置，因為我們在上面啟動了一個web伺服器，簡言之，就是讓我們的html檔案可以在瀏覽器中檢視，並且當你修改js檔案的時候，可以立刻重新整理瀏覽器，個人覺得還是非常酷的功能，當然這個還需要用到模組熱替換的功能，這樣不僅僅對於js檔案，html檔案變化也能實現具體重新整理，不過這個配置目前只能重新整理js檔案，具體重新整理html檔案功能，有興趣的同學可以去GitHub檢視博主最近練手的專案。

    web伺服器需要先下載webpack-dev-server，上面的package配置當中也是有的，contentBase的屬性就是監控html檔案所在目錄，hot屬性就是是否開啟模組熱替換模式。最後就剩下外掛這個模組，對於這個html-webpack-plugin外掛，博主也是看了很多文件，才大概瞭解了，這個外掛的作用就是不需要你自己寫html檔案引用js的script等等，template屬性就是根據你這個模組的html檔案，會自動 生成一個帶有script標籤的html檔案，這個外掛屬性非常多，有興趣的同學也是可以去官方文件查詢到。

     剛剛接觸webpack的同學，可以直接將配置拿過去用了，體驗無重新整理的感覺，不過最終還是要自己去學習，懂得每一個屬性的作用才是最重要的，博主展現的也只是 webpack眾多功能中極少的部分，也是還在努力學習當中，與各位共勉