react webpack.config.js 入门学习
在学习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 入门学习的更多相关文章
- react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false
react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false
- webpack前端构建工具学习总结（三）之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- webpack学习笔记(3)--webpack.config.js
module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...
- webpack3中文版使用参考文档--全面解析webpack.config.js
Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- webpack.config.js配置文件
1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式 ...
- 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 一. 问题描述 在 ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
随机推荐
- maven-dependency-plugin插件的使用
maven-dependency-plugin插件的使用 maven-dependency-plugin是 处理与依赖相关的插件.它有很多可用的goal,大部分是和依赖构建.分析和解决相关的goa ...
- [转载]拜占庭问题深入讨论 from http://bitkan.com/news/topic/14011
拜占庭将军问题深入探讨 了解过比特币和区块链的人,多少都听说过拜占庭将军问题,或听说过比特币(或区块链)的一个重要成就正是解决了拜占庭将军问题.但真正明白这个问题的人并不多,甚至知道这个问题实质的人都 ...
- 2014年听写VOA50篇
在沪江英语的VOA听写栏目上听写完成50篇,听写笔记PDF. 103.VOASP.2014奥巴马国情咨文(1-3).mp3 104.VOASP.2014奥巴马国情咨文(2-3).mp3 105.VOA ...
- 我的Fitbit Force手环使用体验
2013年底,从淘宝上代购了Fitbit Force二代,下手前也对比了当时的几个类似产品,好像记得Nike新款暂时在国内还买不到,就买下了这个,1020元,时至今日好像只需六.七百了.当时看中它的主 ...
- Sharepoint学习笔记—习题系列--70-573习题解析 --索引目录
Sharepoint学习笔记—习题系列--70-573习题解析 为便于查阅,这里整理并列出了我前面播客中的关于70-573习题解析系列的所有问题,有些内容可能会在以后更新, ...
- Intent传递对象的两种方法
Android为intent提供了两种传递对象参数类型的方法 分别需要使实体类实现Serializable接口.Parcelable接口 首先我们要知道,传递对象,需要先将对象序列化 一.那么为什么要 ...
- iOS开发之保存照片到系统相册（Photo Album）
iOS开发之保存照片到系统相册(Photo Album) 保存照片到系统相册这个功能很多社交类的APP都有的,今天我们简单讲解一下,如何将图片保存到系统相册(Photo Album). 创建UIIma ...
- 2、IOS开发--iPad之仿制QQ空间 （初始化HomeViewController子控件视图）
1.先初始化侧边的duck,效果图: 实现步骤: 2.然后初始化BottomMenu,效果: 步骤: 其实到这里,会出现一个小bug,那就是: 子控件的位置移高了,主要原因是: 逻辑分析图: 问题解决 ...
- iOS之UI--主流框架的搭建--仿制QQ的UI框架
使用XCode搭建多个控制器界面,一般在实际开发中建议超过四个控制器界面使用纯代码. 下面的实例其实已经超过了四个,总结详细步骤的目的,主要是更熟悉XCode的StoryBoard使用细节. 先直接上 ...
- HTTP/HTTPs要点
Http(超文本传输协议)是一个属于应用层的面向对象的协议. HTTP结构 HTTP请求: 请求行:Method-Request URI HTTP-Version(CRLF),eg:GET /form ...