知道了怎么样安装,那么学习一下简单的应用吧。
1.安装webpack
npm install webpack -g (全局)
npm install webpack --save--dev (本地)
2.webpack的辅助文件
npm install babel-core
npm install babel-loader
npm install babel-preset-es2015 (解析es6)
npm install babel-preset-react (解析jsx语法)
npm install react (jsx语法支持)
npm install react-dom (jsx语法支持)
3.新建src和dest,分别放源文件和打包后的文件。
4.新建webpack.config.js的文件
module.exports = {
entry: './entry.js', //入口
output: { //输出
path: __dirname,
filename: "./dest/bundle.js"
},
module: {
loaders: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { compact: false, presets: ['es2015', 'react'] }
}]
}
};
5.创建测试文件
在src源文件夹里面创建index.html文件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第一个react的例子</title>
</head>
<body>
<div id="app"></div> </body>
</html>
<script src="./dest/bundle.js">
</script>
6.创建一个测试helloworld.js文件,这个文件我们用jsx和es6语法写。
'
'use strict';
//引入相关的包
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//es6语法
class HelloWorld extends Component {
render() {
return ( <h1> hello, world </h1>)
}
}
//渲染虚拟dom
ReactDOM.render( <
HelloWorld / > ,
document.getElementById('app')
);
7.完成后,我们跳出src目录,创建一个入口文件entry.js
require('../src/helloworld.js');
最终的文件目录结构:
8.运行
webpack,回车,过一会看到编译完成后,在dest文件夹下会多一个bundle.js文件,
然后进入src目录,双击index.html文件
源码及说明点此下载
或者访问:https://github.com/ZhangWeiStudy/React_Note/tree/master/WebReact/webpack_react