開(kāi)始前確定自己安裝了最新版本的 npm
webpack 環(huán)境搭建
初始化文件夾
新建文件夾后進(jìn)入：
mkdir wb3-react
cd wb3-react
npm init -y
這樣就生成了一個(gè) package.json 文件，內(nèi)容如下：
{
"name": "wb3-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
搭建目錄架構(gòu)：
mkdir app build
touch app/main.js app/componet.js
touch build/index.html
touch webpack.config.js
現(xiàn)在目錄結(jié)構(gòu)為：
/app
main.js
component.js
/build
bundle.js (之后自動(dòng)創(chuàng)建)
index.html
package.json
webpack.config.js
安裝 webpack
運(yùn)行安裝命令：
npm install --save-dev webpack
配置 webpack
打開(kāi)文件 webpack.config.js 輸入內(nèi)容：
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
};
測(cè)試 HelloWorld
現(xiàn)在簡(jiǎn)單配置后，就可以寫一個(gè)沒(méi)有 React 的 Hello World 了！
app/component.js 內(nèi)容如下：
'use strict';
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
app/main.js 內(nèi)容如下：
'use strict';
var component = require('./component.js');
document.body.appendChild(component());
現(xiàn)在運(yùn)行 webpack 編譯文件的話，會(huì)有一個(gè) bundle.js，不過(guò)還是沒(méi)有 html 文件來(lái)啟動(dòng)項(xiàng)目，打開(kāi) build/index.html 加入以下內(nèi)容：
build/index.html 內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
現(xiàn)在可以在控制臺(tái)輸入 webpack 來(lái)編譯輸出了疾党，webpack 命令會(huì)自動(dòng)生成一個(gè)
build/bundle.js 文件，然后用瀏覽器打開(kāi) build/index.html 就可以看見(jiàn) Hello World 了惨奕。
不過(guò)我們要使用 html-webpack-plugin 來(lái)生成這個(gè) build/index.html 文件雪位。
使用 html-webpack-plugin
刪除原先的 build/index.html 文件：
rm build/bundle.js build/index.html
安裝 html-webpack-plugin ：
npm install html-webpack-plugin --save-dev
打開(kāi)文件 webpack.config.js 修改成以下內(nèi)容：
webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin()]
};
打開(kāi) package.json 插入新的鍵值對(duì) "build": "webpack" 到 "scripts" 對(duì)象中：
package.json
{
"name": "wb3-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.5.5"
}
}
現(xiàn)在輸入 npm run build 就可以編譯了。
至此梨撞，第一步 webpack 環(huán)境搭建完成雹洗。
webpack 工作流
設(shè)置 webpack-dev-server
安裝：
npm i webpack-dev-server --save-dev
修改 package.json 文件 "scripts" 部分去包含這個(gè)指令，下面是基本的設(shè)置：
package.json
{
...
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
...
}
這時(shí)候卧波，運(yùn)行 npm run dev时肿，會(huì)啟動(dòng)一個(gè) Web 服務(wù)器，然后監(jiān)聽(tīng)文件修改港粱，然后自動(dòng)重新合并你的代碼螃成。打開(kāi)瀏覽器，訪問(wèn) http://localhost:8080 會(huì)看到Hello World。
模塊熱替換
現(xiàn)在所有代碼在作出修改后寸宏，就會(huì)由 webpack-dev-server 自動(dòng)編譯替換宁炫，不過(guò)瀏覽器還是要刷新才能看到替換效果。
模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一击吱。它允許在運(yùn)行時(shí)更新各種模塊淋淀，而無(wú)需進(jìn)行完全刷新遥昧。
在 webpack 版本更新到 3.0.0 之后覆醇，熱加載配置方法有所改動(dòng)。
打開(kāi) webpack.config.js 修改內(nèi)容：
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
devServer:{
contentBase: './build',
hot: true
},
plugins: [new HtmlWebpackPlugin()]
};
保存后重新運(yùn)行 npm run dev 打開(kāi) http://localhost:8080 這時(shí)候炭臭，修改 app/component.js 中的內(nèi)容永脓。保存后，瀏覽器就會(huì)自動(dòng)刷新鞋仍，并且顯示修改后的結(jié)果了常摧。
至此，webpack 工作流完成威创。
React JS 配置
安裝 React JS
安裝 React：
npm install react --save
npm install react-dom --save
在代碼中使用 React JS
刪除 component.js 新建 component.jsx：
component.jsx
import React from 'react';
export default class Hello extends React.Component {
render() {
return <h1>Hello world</h1>;
}
}
修改 main.js：
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component.jsx';
main();
function main() {
var app = document.createElement('div');
app.id = 'app';
document.body.appendChild(app);
ReactDOM.render(<Hello />, document.getElementById('app'));
}
轉(zhuǎn)換 JSX
安裝 JSX 加載器：
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-react --save-dev
配置 webpack落午，在 webpack.config.js 文件中添加 module rules來(lái)使用文件加載器：
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: path.resolve(__dirname, 'app/main.js')
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
devServer:{
contentBase: './build',
hot: true
},
plugins: [
new HtmlWebpackPlugin()
],
module:{
rules:[
{
test: /\.jsx?$/,
use: 'babel-loader'
}
]
}
};
新建文件 .babelrc 來(lái)配置 Babel 識(shí)別 React 語(yǔ)法：
.babelrc
{
"presets": ["react"]
}
運(yùn)行 npm run dev，打開(kāi) http://localhost:8080 查看頁(yè)面肚豺，修改 component.jsx 來(lái)修改頁(yè)面內(nèi)容溃斋。
至此 webpack3 React 開(kāi)發(fā)環(huán)境搭建完成。
進(jìn)入 Github 項(xiàng)目頁(yè)面吸申。
最后的 package.json 內(nèi)容如下梗劫，作為版本索引，懶得話截碴，直接 npm install 就好了
package.json
{
"name": "wb3-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
本文基于
https://doc.webpack-china.org/
https://fakefish.github.io/react-webpack-cookbook/index.html
修改了 webpack 和 React 新版本中的一些新特性
