react+webpack+ES6搭建项目

Posted 2020-09-15 nurdun

react+webpack+ES6打包搭建框架的步骤及部分详解

1. npm init

   • 此条命令是创建一个npm项目
   • NPM 全称 node package manager， 是 nodejs 的包管理工具，使用它让我们可以更方便的使用别人的代码，以及向别人分享我们的代码。
   • 执行后，npm会引导输入一些基本信息，可以默认按回车键，然后会生成一个package.json文件，包含基本信息，后续的依赖也会保存到它里边。

2. npm install react react-dom --save

   • 安装react和react-dom依赖
3. npm install webpack webpack-dev-server --save-dev
   • 安装webpack和webpack-dev-server依赖
   • webpack 是一个模块打包工具
   • 上边所说的模块在这里指js&css&image，有了webpack就可以很方便的打包这三种资源。
   • webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。
4. npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
   • 安装babel以及相关的插件
   • Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

至此我们所需要的依赖都安装完毕啦
-------------------------------------分割线----------------------------------------------

代码部分

代码结构图：

代码结构

1. 首先创建两个组件，即就是hello和world文件夹中的index.js,分别只用来显示一个“hello”和“world”就好。
2. 在build文件夹下创建一个入口页面，index.html,去使用上边的两个组件。
3. webpack配置
   • webpack打包时需要一个入口文件，需要将react组件引到这个入口文件，就是component中的index.js
     index.js:

     import Hello from ‘./hello/index.js‘;
     import World from ‘./world/index.js‘;

   • webpack.config.js的配置

   • var path = require(‘path‘);
     var webpack = require(‘webpack‘);
     var ROOT_PATH = path.resolve(__dirname);
     var APP_PATH = path.resolve(__dirname, ‘./components/index.js‘);
     var BUILD_PATH = path.resolve(__dirname, ‘./build‘);
     module.exports = {
         entry: APP_PATH,
         output: {
             path: BUILD_PATH,
             filename: ‘bundle.js‘
         },
         module: {
             loaders: [{
                  test: /\.jsx?$/,
                  loaders: [‘babel-loader?presets[]=es2015,presets[]=react‘]
             }]
         }
     }            

      

      

   • 配置完成后需要最后执行webpack.config.js中的构建任务，在package.json中配置就可以完成

     "scripts": {
         "build": "webpack"
     }

      

   • 最后将打包好的文件bundle.js引入到入口页面index.html中，此时去打开index.html就可以看到效果啦
     那如何启动一个静态资源服务器来看到页面呢？？？
   • 此时可以直接在package.json中做修改，用到的是前边安装过的webpack-dev-server

     "scripts": {
         "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
     }

      

     dev 中各个参数的含义：
   • --webpack-dev-server 在 localhost:8080 建立一个 Web 服务器；
   • --devtool eval 映射编译好的源码，用于调试；
   • --progress 显示代码打包进度；
   • --colors 表示在命令行中显示颜色；
   • --content-base 来指定 server 启动后的内容目录。

执行 npm run dev 启动 server，此时打开 http://localhost:8080 ，即可看到效果。