搭建es6+react开发环境---webpack

来源：互联网发布：淘宝购买steam游戏编辑：程序博客网时间：2024/05/21 06:14

1、新建项目文件夹，根据自己项目需要建立相应的文件夹。我在这里建立app文件夹以及public文件夹。

进入dos窗口 cd进项目根目录

2、npm init --yes 生成package.json

3、npm install webpack --save-dev 安装webpack

4、npm install webpack-dev-server --save-dev 安装webpac-dev-server，可以在localhost:8080打开自己的项目

5、新建webpack.config.js （webpack配置文件）

内容如下

module.exports = {  entry:__dirname+"/app/main.js",  output:{    path:__dirname+"/public",    filename:"bundle.js"  },  devServer: {   contentBase: "./public",//本地服务器所加载的页面所在的目录   historyApiFallback: true,//不跳转   inline: true//实时刷新 }, module:{    rules:[        {            test: /(\.jsx|\.js)$/,            use: {                loader: "babel-loader",                options: {                    presets: [                        "es2015", "react"                    ]                }            },            exclude: /node_modules/        }    ]  }};

6、进入package.json编辑自己的脚本运行语句，（方便自己使用）

找到“script”键名。

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack", // 自己添加的脚本运行语句
"server": "webpack-dev-server --open" //自己添加的脚本运行语句
}

7.接下来的工作是安装react，es6以及其相应的编译器babel

npm install babel-core --save-dev //babel核心模块

npm install babel-loader --save-dev //babel加载器

npm install babel-preset-es2015 babel-preset-react --save-dev//es2015与react编译器

npm install react react-dom es2015 --save-dev //安装es2015与react

8.安装完babel插件。接下来需要编写babel配置文件。项目根目录下新建文件 .babelrc

内容如下

{
"presets": ["es2015","react"]
}

9.在app目录下新建component文件夹。

10.在public目录下新建index.html

内容如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>青玉</title>  </head>  <body>    <div id="root"></div>  </body>  <script src = "/bundle.js"></script></html>

注意。html中的bundle.js不需要新建。webpack打包代码会自动生成的。

11.尝试编写一个组件Header

在app/component目录下，新建Header文件夹，文件里新建Header.js

内容如下

import React,{Component} from 'react';

class Header extends Component{
render(){
return(
<div>hello world hello react hello</div>
)
}
}

export default Header;

12.引入Header组件，查看效果。

在app目录下新建main.js文件

内容如下

import React from 'react';
import {render} from 'react-dom';
import Header from './component/Header/Header';

render(
<Header />,
document.getElementById('root')
);

13.写完代码。在命令行窗口运行 webpack或者 npm start 。能看到public目录下生产了一个bundle.js文件。

此时打开index.html，能够看到效果。

14.但是我们要页面运行在服务器上，而不是直接打开。运行npm run server。浏览器窗口自动打开localhost:8080

页面效果如下

最后，我们的项目结构如下：

阅读全文

0 0