webpack笔记_(3)_First_Project

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

1.安装webpack

1 2	`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')
    );