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

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

页面效果如下





最后,我们的项目结构如下:






阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30604453/article/details/77979880
个人分类: webpack react
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭