配置webpack+react环境

894974231 发布于2019-08-20 15:59 / 2513人阅读

摘要：假设环境已经装好当前目录创建文件然后当前目录执行安装成功后在当前目录执行创建并编辑文件表示要编译的文件的类型，这里要编译的是文件装载的哪些模块标示不编译文件夹下面的内容具体的编译的类型，表示不压缩我们需要编译的是和

假设node环境已经装好

当前目录创建package.json文件：

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "a test",
  "main": "bundle.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "xxx",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1"
  },
  "dependencies": {
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

然后当前目录执行：

npm install

安装成功后在当前目录执行创建并编辑文件webpack.config.js：

var path = require("path")

module.exports = {
  entry: "./entry.js",
  output: {
    path:path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  resolve: {
        extensions: [".js", ".jsx"]
    },
  module: {
    loaders: [
      {test: /.css$/, loader: "style-loader!css-loader"},
      {
        test: /.js?$/,//表示要编译的文件的类型，这里要编译的是js文件
        loader: "babel-loader",//装载的哪些模块
        exclude: /node_modules/,//标示不编译node_modules文件夹下面的内容
        query: {//具体的编译的类型，
            compact: true,//表示不压缩
            presets: ["es2015", "react"]//我们需要编译的是es6和react
        }
      }
    ]
  }
}

创建编辑入口文件entry.js:

import React from "react";
import { render } from "react-dom";
var myDivElement = ;
render(myDivElement, document.getElementById("mountNode"));

创建编辑index.html:

执行命令webpack
成功！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82639.html

React系列---Webpack环境搭建（二）不同环境不同配置

摘要：系列环境搭建一手动搭建系列环境搭建二不同环境不同配置系列环境搭建三打包性能优化实际项目中，往往不同环境有不同的构建需求。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境搭建（三）打包性能优化实际项目中，往往不同环境有不同的构建需求。比如开发、测试和生产环境对应的后端接口地...

coordinate35 2019-08-20 17:35 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

cnio 2019-08-21 17:47 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

GHOST_349178 2019-08-01 18:04 评论0 收藏0
最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
React系列---Webpack环境搭建（三）打包性能优化

摘要：的选项中，是文件的输出路径是暴露的对象名，要跟保持一致是解析包路径的上下文，这个要跟下面要配置的保持一致。最后修改一下模板，增加引用文件给入口文件再加点依赖模块，方便打包观察运行打包可以看到，入口文件里依赖的，模块，直接引用了。 React系列---Webpack环境搭建（一）手动搭建React系列---Webpack环境搭建（二）不同环境不同配置React系列---Webpack环境...

Jason_Geng 2019-08-20 17:39 评论0 收藏0
构建React开发环境

摘要：使用包管理工具，基于构建工具，搭建开发环境由于一些软件安装跟系统环境相关，故这里查看本文档，需要根据自己的系统环境，选择相对应的系统版本。使用Yarn包管理工具，基于Webpack构建工具，搭建React开发环境 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 由于一些软件安装跟系统...

yck 2019-08-26 10:15 评论0 收藏0