要让webpack知道这就是我们的index.html入口文件,并且我们不需要手动引入打包后的js文件,需要安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', //指定模板路径
filename: 'index.html', //指定文件名
})
]
}

react里面的JSX语法普通浏览器可解析不了,需要安装babel来解析

npm install babel babel-cli babel-loader --save-dev

再安装两个分别用于解析es6和jsx语法的插件:

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

module.exports = {
...
module: {
loaders: [ //配置加载器
{
test: /\.js$/, //配置要处理的文件格式,一般使用正则表达式匹配
loader: 'babel-loader', //使用的加载器名称
query: { //babel的配置参数,可以写在.babelrc文件里也可以写在这里
presets: ['env', 'react']
}
}
]
}
}

webpack最重要的配置都在modules(模块)里,loaders(加载器)是处理源文件的,后面你会看到,loader可以处理不同的js(jsx, es6等)编译成js,less等编译成css,将项目中引用的图片等静态资源路径处理成打包以后可以正确识别的路径等

单独编译CSS文件(只在生产环境配置)

为了加载速度更快会把CSS和JS打包到不同的文件中,使用extract-text-webpack-plugin插件可以分离CSS。而其实,开发的时候是不需要单独编译CSS文件的。如果你在开发环境加了这个,又配置了热更新,那么你会发现CSS发生变化时热更新用不了了,所以建议开发环境就不要配置这个了

npm install extract-text-webpack-plugin --save

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
//...
module: {
loaders: [
{
test: /\.css/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html'
}),
new ExtractTextWebpackPlugin("bundle.css")
],
};

react-webpack(一)的更多相关文章

  1. 部署React+webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

  2. scss + react + webpack + es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

  3. react +webpack 配置px2rem

    项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...

  4. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  5. NodeJS + React + Webpack + Echarts

    最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1.  在react里封装echarts组件,并调用后端API. (参考的 ...

  6. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  7. 如何在react&webpack中引入图片?

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  8. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  9. React + webpack 快速搭建开发环境

    因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...

  10. React + webpack 环境配置

    安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码 ...

随机推荐

  1. 稀疏表示(Sparse Representations)

    1.什么是稀疏表示: 用较少的基本信号的线性组合来表达大部分或者全部的原始信号. 其中,这些基本信号被称作原子,是从过完备字典中选出来的:而过完备字典则是由个数超过信号维数的原子聚集而来的.可见,任一 ...

  2. Django的Model继承abstract,proxy,managed。。。

    Django 中的 model 继承和 Python 中的类继承非常相似,只不过你要选择具体的实现方式:让父 model 拥有独立的数据库:还是让父 model 只包含基本的公共信息,而这些信息只能由 ...

  3. 模版抽离 优化url

    抽离出base模板 复制index的代码到base里面,指定views里面跳转到base.html,删除掉会变化的保留通用的 把主要内容写写在block里面,写了三个block {% block le ...

  4. MapInfo 文件格式说明

    MapInfo 文件格式说明(id.map.tab.dat) (1). 属性数据的表结构文件.TAB 属性数据表结构文件定义了地图属性数据的表结构,包括字段数.字段名称.字段类型和字段宽度.索引字段及 ...

  5. 学习OpenCV2——Mat之通道的理解

    本文详细介绍了opencv中涉及通道的知识,包括图像类型转换,通道合成分解,图像的显示. 来源:http://blog.csdn.net/GDFSG/article/details/50927257 ...

  6. iOS 视图控制器转场动画/页面切换效果/跳转动画 学习

    一 学习 在 UINavigationController 中 push 和 pop 的转场效果  (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimation:  ...

  7. 026_默认的MapReduce Driver(最小驱动问题)

    1. 最小配置的MapReduce Driver 读取输入文件中的内容,输出到指定目录的输出文件中,此时文件中的内容为: Key---输入文件每行内容的起始位置. Value---输入文件每行的原始内 ...

  8. Linux Shell基础 Shell的输入重定向和输出重定向

    概述 在 Linux 中输入设备指的是键盘,输出设备指的是显示器.在 Linux 中,所有的内容都是文件,计算机硬件也是文件,标准输入设备(键盘)和标准输出设备(显示器)也是文件.这些设备的设备文件名 ...

  9. 安装Discuz开源论坛

    11.添加mysql普通用户 接着上篇的lamp这篇安装Discuz 配置虚拟主机 1.打开虚拟主机配置 [root@NFS-31 ~]# vim /usr/local/apache2/conf/ht ...

  10. iOS_多线程(一)

    在学习多线程之前首先搞清楚以下几个问题. 并发:在同一时刻,只有一条指令被执行,多条指令进行快速切换执行. 并行:在同一时刻,多个处理器可以处理多条指令 1.什么是进程?      一个运行的程序就是 ...