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编辑  收藏  举报