要让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. Spark架构解析(转)

    Application: Application是创建了SparkContext实例对象的Spark用户,包含了Driver程序, Spark-shell是一个应用程序,因为spark-shell在启 ...

  2. 1.5 使用电脑测试MC20的发送英文短信功能

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  3. 用django写个CMS系统

    上一篇介绍过django自带的flatpages,能够做简单的CMS.但是对于我们的真正的工作中的使用意义并不大.还是自己动手写一个吧. 不用说,一定是先从models开始的: from django ...

  4. rabbitmq 命令行工具 执行失败.

          修改cookie成一样       资料: http://zhiku8.com/rabbitmq-authentication-failed-rejected-by-the-remote- ...

  5. windows 2008 负载均衡(NLB) 问题汇总

    1. 主机不可访问 修改host文件. 将主机名与IP做相应的映射. 它们应该是使用主机名来访问对应的服务器. host文件路径: C:\Windows\System32\drivers\etc 19 ...

  6. LeetCode_Easy_471:Number Complement

    LeetCode_Easy_471:Number Complement 题目描述 Given a positive integer, output its complement number. The ...

  7. Scalability, Availability & Stability Patterns

    https://blog.csdn.net/ajian005/article/details/6191814   一 自我有要求的读者应该提出问题:(研习:掌握层次:)能力级别:不会(了解)——领会( ...

  8. Raspberry Pi开发之旅-同步时间

    使用htpdate同步时间 由于树莓派板子上没有 RTC 硬件和电池,因此树莓派上的系统时间重启是保存不了的.网上已经有人想到应对 NTP 被防火墙封掉类似的需求了,开源的 htpdate 命令直接使 ...

  9. Dual Boot WINDOWS 10 and KALI LINUX Easily STEP BY STEP GUIDE截图

    mark. kali安装:https://www.youtube.com/watch?v=KLj2yQPWZDk 删除无用分区:http://www.xitongcheng.com/jiaocheng ...

  10. 3.6《深入理解计算机系统》笔记(四)虚拟存储器,malloc,垃圾回收【插图】

    概述 ●我们电脑上运行的程序都是使用虚拟存储,跟物理内存根本不搭边. ●既然虚拟内存是在磁盘上的,为什么它又运行这么好,并没有感觉卡顿?这要感谢程序的局部性! ●虚拟存储器的调度是一个操作系统必须做好 ...