简单Webpacak+React入门实例

最新推荐文章于 2024-05-02 23:09:04 发布

两只小蚂蚁

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量310

点赞数 1

分类专栏： webpack入门文章标签：模块化前端源代码 components

本文链接：https://blog.csdn.net/knijiokm/article/details/56676800

版权

webpack入门专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Webpacak入门实例

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 —— [ Webpack中文文档 ]

本实例源代码请参考 [ WebpackEx ].

项目目录

名称：webpackEx　目录：

目录阐述

webpackEx　： app【存放模块】

components【存放React功能组件】

Greeter.js

main.js

node_modules

项目运行所需要的模块，使用npm install命令安装或者直接npm run build 运行代码自动安装

public[存放静态资源，如普通js,css,图片等]

bulder.js[webpack打包导出来的Js]

bulder.js.map[webpack生成Source Maps,利于排查错误]

index.html

package.json【定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）– [package.json参数详解 ]】

webpack.config.js【关于webpack的相关配置】

package.json

定义启动命令(npm run build)，也可以不自定义而使用$ webpack –progress -colors

  "scripts": {
    "build": "webpack --progress -colors"
  }

webpack.config.js

webpack.config.js本身也是一个标准的Commonjs规范的模块，例如：

module.exports = {
    devtool: 'eval-source-map',//生成Source Maps,这里选择eval-source-map
  entry:  "./app/main.js",//已多次提及的唯一入口文件
  output: {
    path: "./public/",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  resolve: {
    //让webpack检测到的文件后缀名，第一项空字符串必不可少，否则报模块错误
     extensions: ['','.js','.jsx','styl']
},
module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: "babel-loader",
      exclude: '/node_modules/',
                 query: {//具体的编译的类型，
                compact: false,//表示不压缩
                presets: ['es2015','react']//我们需要编译的是es6和react
            }
    }]
  }
}

基本架构

新建webpackEx项目
新建webpackEx->app文件夹
新建webpackEx->public文件夹
新建webpackEx->webpack.config.js文件

这里已经初步搭建好我们项目的架构

写入模块及入口文件

在app下新增Greeter.js（一个功能模块）


module.exports = function() { //将该方法导出
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

var Running={   //定义一个对象
    a:1,b:2,  //给这个对象增加a,b连个属性并分别复制为1,2
    findMaxDuplicateChar:function(str){   //定义一个查找数组中重复次数最多的元素的方法
          if(str.length == 1) {
    return str;
  }
  let charObj = {};
  for(let i=0;i<str.length;i++) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    }else{
      charObj[str.charAt(i)] += 1;
    }
  }
  let maxChar = '',
      maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar;
    }

}
module.exports.tag=1; //给exports.tag属性赋值，注意不能直接给exports赋值
module.exports.Running=Running;  //返回一个对象

在public->components下新增productBox.jsx（React的组件）

import React from 'react';

class ProductBox extends React.Component{
btnClick() {
     console.info(1);
}
  render() {
    return (
      <div className='productBox' onClick={this.btnClick.bind(this)}>
        Hello World!
      </div>
    );
  }
}

module.exports = ProductBox;

在app下新增main.js(入口文件)


import greeter from './Greeter.js';
import React from 'react'; // 注意：React 0.14版本之后将react package拆分成了 react 和 react-dom 两个package
import ReactDom from 'react-dom';

let AppComponent = require('./components/productBox.jsx'); //将组件导出
let Running=greeter.Running;
require(["jquery"], function ($) {

 $('#root').append(greeter());
console.log(greeter.tag);
console.log(Running.a);
console.log(Running.findMaxDuplicateChar('dffd'));
// $("#root").click(function(event) {

//  alert("hellow react!");
// });
ReactDom.render(
    <AppComponent />, document.getElementById('root')
    );
});

在public下新增index.html（用来展示的主页面）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>

    </div>    
    <input type="text" name="" placeholder="请输入字符串" id="inputd">
    <span id="nums">dsfe</span>
    <script src="bundle.js"></script> <!--这里只需要引入打包后的js-->
  </body>
</html>

关于 React ，参考 React中文文档,
关于 ES6基础语法 语法，参考这儿.

启动项目

使用npm run build命令进行项目打包,打包成功后会有如下显示：
这里写图片描述

这里显示的是之前打包过再进行打包成功后的信息

两只小蚂蚁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
简单Webpacak+React入门实例

Webpacak入门实例 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 —— [ Webpack中文文档 ]本实例源代码请参考 [ WebpackEx ]. 项目目录名称：webpackEx　目录：目录阐述webpackEx　：app【存放模块】components【存放React功能组件】Gr
复制链接

扫一扫