React使用——webpack

新建目录:

  demo(文件夹)

      ——views(文件夹)

          ——demo.html

      ——app(文件夹)

          ——components(文件夹)

                ——demo.jsx

          ——js(文件夹)

                ——demo_1.js

                ——demo_2.js

          ——css(文件夹)

                ——demo.css

          ——main.js(入口文件

编辑内容:

1、demo.html的内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React使用——webpack</title>
</head>
<body>
    <div id="demo"></div>

    <!-- 这里引入的js文件是把所有js打包后的文件 -->
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

2、demo.jsx的内容为:

//ES6的写法
import React from ‘react‘;       //引入react
import styles from ‘../css/demo.css‘;    //导入相应css的样式

//创建组件类:名字首字母必须大写
class demo extends React.Component {
    render() {
        return (
            // react里面类名一定要用className因为class是关键字
            //使用cssModule添加类名的方法避免全局污染
            <div className={styles.demo}>Hello World!</div>
        )
    }
}

//导出组件
export default demo;

3、main.js的内容为:

// 引入react
import React from ‘react‘;
// 引入react-dom
import ReactDOM from ‘react-dom‘;
// 引入demo.jsx这个组件,import后面引用的组件一定要大写
import Demo from ‘./components/demo.jsx‘;

// 引用demo_1和demo_2这两个模块
var demo_1 = require(‘./js/demo_1.js‘);
var demo_2 = require(‘./js/demo_2.js‘);

// 重构dom树,通过id找到demo这个元素,并且将Demo这个组件显示出来
ReactDOM.render(
    <Demo />,
    document.getElementById(‘demo‘)
);

4、demo.css的内容为:

.demo{
    color:red;
}

5、demo_1.js的内容为:

console.log("你看,我demo_1被打包执行了哟~~~");

6、demo_2.js的内容为:

console.log("你看,我demo_2被打包执行了哟~~~");

使用Webpack:

  1、npm install -g webpack         //全局安装

  2、npm install --save-dev webpack   //安装到你的项目目录

  3、npm init                 //自动帮你创建package.json文件

  4、npm install --save-dev webpack  //安装Webpack依赖包

  5、根目录瞎新建webpack的配置文件webpack.config.js,内容为:

module.exports = {
    devtool: "eval-source-map", //使得编译后的代码可读性更高,也更容易调试

    entry: __dirname + "/public/main.js", //已多次提及的唯一入口文件
      output: {        
        path: __dirname + "/views", //文件打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
        // 相当于将你所有的js文件打包成一个js文件,变成bundle.js文件
    },

    // 使webpack能实现对不同格式的文件的处理
    module: {
        rules: [
            // 处理jsx或者js文件
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            // 处理css文件
            {
                test: /\.css$/, // 同时引入CSS module,Webpack对CSS模块化提供了非常好的支持
                use: [{ //只需要在CSS loader中进行简单配置即可,然后就可以直接把CSS的类名传递到组件的代码中,这样做有效避免了全局污染。
                    loader: "style-loader"
                }, {
                    loader: "css-loader",
                    options: {
                        modules: true, // 指定启用css modules
                        localIdentName: ‘[name]__[local]--[hash:base64:5]‘ // 指定css的类名格式
                    }
                }]
            }
        ]
    }

}

  6、.babelrc的内容为(webpack会自动调用.babelrc里的babel配置选项,方便以后babel配置选项过多):

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

  7、修改package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"   //此处是方便我们直接通过npm start打包,package.json里不要有注释
  }

  8、安装babel依赖项:

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

  9、安装ES6和JSX支持的React 和 React-DOM:

npm install --save react react-dom

  10、安装webpack提供两个工具处理样式表,css-loader 和 style-loader

npm install --save-dev style-loader css-loader

  11、npm start再开打你的demo.html

总结一下:webpack打包工具为我们提供了方便,通过main.js文件将所有的文件打包成bundle.js文件输出到views文件夹里面,减少了多而乱的<srcipt>标签的引用,同时webpack打包工具还有更多的功能,可以参考一下其他博客,我这里也只是一个简单的demo,通过react和webpack的学习相信做出更多的demo项目。

时间: 2024-10-17 03:10:45

React使用——webpack的相关文章

React +ES6 +Webpack入门

React +ES6 +Webpack入门 React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再赘述.本文将详细的记录react babel webpack的环境搭建,以及搭建的过程中遇到的一些坑. 一.新建React项目 1.如图为新建react项目结构,其中 entry.js放置react入口代码,index.js放置react组件代码,asse

reactjs学习一(环境搭配react+es6+webpack热部署)

reactjs学习一(环境搭配react+es6+webpack热部署) reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推荐使用es6+webpack来搭建开发环境. 首先,安装nodejs,略过,安装gitbrach,略过,直接搜索到相对应软件的官网,下载最新正式版本的软件,然后就下一步下一步完成安装就可以了,很简单的过程,但是不容忽略,如有问题

React+ES6+Webpack深入浅出

React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再赘述.本文将详细的记录react babel webpack的环境搭建,以及搭建的过程中遇到的一些坑. 一.新建React项目 1.如图为新建react项目结构,其中 entry.js放置react入口代码,index.js放置react组件代码,assets文件是webpack打包之后生成文件的存

spring + spring mvc + mybatis + react + reflux + webpack Web工程例子

最近写了个Java Web工程demo,使用maven构建: 后端使用spring + spring mvc + mybatis: 前端使用react + reflux + webpack,使用ES6语法:顺带用了下jquery,bootstrap,echarts等插件,写了两个小demo 初版,还需不断完善. 先来个整体感觉吧, 贴几张图: 后端,熟悉的人自然熟悉: 前端, 有没感觉前端的写法越来越像后端了,对于我这种业余前端选手来说,挺喜欢这种目录结构和语法的,哈哈哈: 运行效果: 后端说明

前端框架及项目面试-聚焦Vue、React、Webpack

第1章 课程导学介绍课程制作的背景和课程主要内容. 第2章 课程介绍先出几道面试真题,引导思考.带着问题来继续学习,效果更好. 第3章 Vue 使用Vue 是前端面试必考内容,首先要保证自己要会使用 Vue .本章讲解 Vue 基本使用.组件使用.高级特性和 Vuex Vue-router ,这些部分的知识点和面试题. 第4章 Vue 原理要保证自己的面试竞争力,必须掌握 Vue 原理,前端高级面试或者大厂面试中常考.本章讲解虚拟DOM,diff 算法,响应式,模板编译,组件渲染等 Vue 原理

react+redux+webpack+git技术栈

1 一.git bash here 2 mdkr 3 cnpm init -y 4 ls -a 5 ls -l 6 ls -la隐藏的也可查看 7 cat package.json 8 二.npm 9 npm i webpack-dev-server -g 10 全局:任何目录运行 11 本地:本地需要调用附带的插件 12 npm list 13 npm list -g 14 npm uninstall supervisor -g 全局删除 15 npm remove supervisor -g

react+es6+webpack环境搭建以及项目入门

前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一下移动端的.看完之后,我内心也勾勒出了一个自己的博客,所以开始正式搭建自己的博客作为项目练手吧. 一,搭建环境 1,安装node 第一步的话首先得确定安装好了node的环境,这个毋庸置疑哈.国外的官网的话好像得FQ,方正我就在node中文网上下载的.(http://nodejs.cn/)安装过程就不

react mobx webpack 使用案例

1.package.json: { "name": "wtest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "build

使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项目,然后再去完成. 第一步: 需求 除了上面的基本需求之外,我们还需要实现登录.注册的相关功能,这样可以保证用户的唯一性,并在后台做出记录. 第二步:确定技术栈 express --- 首先,作为前端使用node就可以取代后端java.php开发的工作,对于这个项目是必须的.作为node的框架,ex