开始前确定自己安装了最新版本的 npm
webpack 环境搭建
初始化文件夹
新建文件夹后进入：
mkdir wb3-react
cd wb3-react
npm init -y
这样就生成了一个 package.json 文件，内容如下：
{
"name": "wb3-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
搭建目录架构：
mkdir app build
touch app/main.js app/componet.js
touch build/index.html
touch webpack.config.js
现在目录结构为：
/app
main.js
component.js
/build
bundle.js (之后自动创建)
index.html
package.json
webpack.config.js
安装 webpack
运行安装命令：
npm install --save-dev webpack
配置 webpack
打开文件 webpack.config.js 输入内容：
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',
},
};
测试 HelloWorld
现在简单配置后，就可以写一个没有 React 的 Hello World 了！
app/component.js 内容如下：
'use strict';
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
app/main.js 内容如下：
'use strict';
var component = require('./component.js');
document.body.appendChild(component());
现在运行 webpack 编译文件的话，会有一个 bundle.js，不过还是没有 html 文件来启动项目，打开 build/index.html 加入以下内容：
build/index.html 内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
现在可以在控制台输入 webpack 来编译输出了，webpack 命令会自动生成一个
build/bundle.js 文件，然后用浏览器打开 build/index.html 就可以看见 Hello World 了。
不过我们要使用 html-webpack-plugin 来生成这个 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
打开文件 webpack.config.js 修改成以下内容：
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()]
};
打开 package.json 插入新的键值对 "build": "webpack" 到 "scripts" 对象中：
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"
}
}
现在输入 npm run build 就可以编译了。
至此，第一步 webpack 环境搭建完成。
webpack 工作流
设置 webpack-dev-server
安装：
npm i webpack-dev-server --save-dev
修改 package.json 文件 "scripts" 部分去包含这个指令，下面是基本的设置：
package.json
{
...
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
...
}
这时候，运行 npm run dev，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。打开浏览器，访问 http://localhost:8080 会看到Hello World。
模块热替换
现在所有代码在作出修改后，就会由 webpack-dev-server 自动编译替换，不过浏览器还是要刷新才能看到替换效果。
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。
在 webpack 版本更新到 3.0.0 之后，热加载配置方法有所改动。
打开 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',
},
devServer:{
contentBase: './build',
hot: true
},
plugins: [new HtmlWebpackPlugin()]
};
保存后重新运行 npm run dev 打开 http://localhost:8080 这时候，修改 app/component.js 中的内容。保存后，浏览器就会自动刷新，并且显示修改后的结果了。
至此，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'));
}
转换 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来使用文件加载器：
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 来配置 Babel 识别 React 语法：
.babelrc
{
"presets": ["react"]
}
运行 npm run dev，打开 http://localhost:8080 查看页面，修改 component.jsx 来修改页面内容。
至此 webpack3 React 开发环境搭建完成。
进入 Github 项目页面。
最后的 package.json 内容如下，作为版本索引，懒得话，直接 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 新版本中的一些新特性
网友评论