webpack笔记_(3)_First_Project

知道了怎么样安装，那么学习一下简单的应用吧。


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

posted @ 2016-12-01 15:36  风来风往风伤(TiAmo）  阅读(152)  评论(0)  编辑  收藏  举报