在学习react 的时候必然会用到webpack打包工具，webpack的快速入门另外一篇文章中有记录，这里只记录webpack.config.js文件，因为每个项目下都必须配置，通俗的讲，它的作用就是告诉Webpack要做什么。

一个最简单的Webpack配置文件webpack.config.js如下所示：

module.exports = {

  entry:[

    './app/main.js'

  ],

  output: {

    path: __dirname + '/assets/',

    publicPath: "/assets/",

    filename: 'bundle.js'

  }

};

　　其中：

entry：定义了打包后的入口文件，数组中的所有文件会按顺序打包。每个文件进行依赖的递归查找，直到所有相关模块都被打包。

output：定义了输出文件的位置，其中常用的参数包括：

  • path: 打包文件存放的绝对路径
  • publicPath: 网站运行时的访问路径
  • filename: 打包后的文件名
现在来看如何打包一个React组件。假设有如下项目文件夹结构：


- react-demo+ assets/

   - js/

     Hello.js

     entry.js

   index.html

   webpack.config.js

其中Hello.js定义了一个简单的React组件，使用ES6语法：

var React = require('react');

class Hello extends React.Component {

  render() {

    return (

      <h1>Hello {this.props.name}!</h1>

    );

  }

}

entry.js是入口文件，将一个Hello组件输出到界面：

var React = require('react');

var Hello = require('./Hello');

React.render(<Hello name="World" />, document.body);

index.html的内容如下：

<html>

<head></head>

<body>

<script src="/assets/bundle.js"></script>

</body>

</html>

在这里Hello.js和entry.js都是JSX组件语法，需要对它们进行预处理，这就要引入webpack的JSX加载器。因此在webpack.config.js 配置文件中加入如下配置：

module: {

  loaders: [

    { test: /\.jsx?$/, loaders: ['jsx?harmony']}

  ]

}

加载器的作用是它能将JSX编译成JavaScript并加载为Webpack模块这样在当前目录执行webpack命令之后，在assets目录将生成bundle.js，打包了entry.js的内容。当浏览器打开当前服务器上的index.html，将显示“Hello World”。这是一个非常简单的例子，演示了如何使用Webpack来进行最简单的React组件打包。

 

react webpack.config.js 入门学习的更多相关文章

  1. react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

    react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

  2. webpack前端构建工具学习总结（三）之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  3. webpack学习笔记(3)--webpack.config.js

    module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...

  4. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  5. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  6. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  7. webpack.config.js配置文件

    1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式 ...

  8. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  9. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

随机推荐

  1. Ahjesus Nodejs01 环境搭建及运行

    访问http://nodejs.org/,根据系统选择下载文件,我用的win7 64 安装一路下一步直到完成 运行cmd输入node -v查看是否安装成功 成功会显示版本号 到此环境搭建完毕 ==== ...

  2. [Intellij] 编译报错 javacTask

    报错信息: Idea 编译报错 javacTask: 源发行版 1.6 需要目标发行版 1.6 解决方案:

  3. 怎么通过activity里面的一个按钮跳转到另一个fragment（android FragmentTransaction.replace的用法介绍）

    即:android FragmentTransaction.replace的用法介绍 Fragment的生命周期和它的宿主Activity密切相关,几乎和宿主Activity的生命周期一致,他们之间最 ...

  4. SDK Build Tools revision (19.0.3) is too low for project Min

    SDK Build Tools revision (19.0.3) is too low for project Min(转)       如果你正在使用Android Studio工具进行开发,且将 ...

  5. <<摩托车修理技术与禅>>读书笔记

    一旦想要求快,就表示你再也不关心它,而想去做别的事. 感触比较大的一句话.其实每个人看书,都有不同的侧重点,不同经历的人看同样的书,收获是不一样的,所以不能在乎收获多少,只要有收获就行.

  6. artTemplate 介绍

    artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 编 ...

  7. JavaScript If...Else、Switch、For、While、Break、Continue语句

    一,JavaScript If...Else 语句 条件语句 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript 中,我们可使用 ...

  8. ArcEngine尝试读取或写入受保护的内存

    先说一下我的开发环境: Win10 + ArcGIS10.0 + ArcEngine10.0 + Framework4.0 今天调用新的GP工具则出现"尝试读取或写入受保护的内存.这通常指示 ...

  9. 实验12：Problem G: 强悍的矩阵运算来了

    这个题目主要是乘法运算符的重载,卡了我好久,矩阵的乘法用3个嵌套的for循环进行,要分清楚矩阵的乘法结果是第一个矩阵的行,第二个矩阵的列所组成的矩阵. 重载+,*运算符时,可以在参数列表中传两个矩阵引 ...

  10. android 打包错误

    打包时报如下错误: Export aborted because fatal lint errors were found. These are listed in the Lint View. Ei ...