webpack入门+react环境配置 1
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤
webpack 基本安装
开始前还是万万不能缺少的安装:
npm install webpack -g
安装完接着是建个文件夹新建一个package.json依赖管理文件
npm init //运行后 按提示填写 当然嫌麻烦 就直接下一步 下一步就好 无伤大碍
现在安装我们的webpack
npm install webpack --save-dev
//--save-dev 的意思是将这个安装过程记录到我们的package.json依赖管理文件里
完后新建一个文件并命名为webpack.config.js(如同我们的常规的 gulpfile.js、Gruntfile.js),就是一个配置项,告诉 webpack 它需要做什么。
打开webpack.config.js引入webpack
var webpack = require('webpack');
webpack 基本入门
webpack主要结构分三个:入口文件配置(entry)、入口文件输出配置(output)、加载器配置(module)、其他配置(resolve)
入口文件配置
entry: {index : './src/main.js'},
入口文件输出配置
//配置编译成功后文件存放的位置
output: {path: 'dist/js', //编译后文件所在的文件夹filename: '[name].js' //根据入口文件名命名编译后的文件名,编译后文件还是叫main.js},
加载器配置
module: {//最关键的一块配置,它告知 webpack 每一种文件都需要使用什么加载器来处理loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' },{ test: /\.js$/, loader: 'jsx-loader?harmony' },{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}]},
其他配置
resolve: {//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名extensions: ['', '.js', '.json', '.scss']}
ok!好记忆不如烂笔头,现在我们来自己搭建一个react的开发环境吧!
先参考我的目录结构
build存放编译后的文件,development存放react代码的文件夹,components存放react组件的文件夹,node_modules存放安装的依赖
我们先要安装一些项目依赖:
npm install --save-dev react react-domnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-reactnpm install --save-dev style-loader css-loader sass-loader url-loadernpm install --save-dev webpack-dev-server
//自动刷新修改后的结果,在webpack.config.js中配置webpack-dev-server,
//在这里需要修改下entry的路径,给它加一个webpack/hot/dev-server,后文会提到
要是安装失败那就分开一个个装,还不行就用淘宝的cnpm装 ,还不行就看看你的node和npm的环境变量等配置(亲身体会T_T)
npm install cnpm -g
行!接下来是文件的内容
webpack.config.js文件的配置如下:
var path = require('path');
var webpack = require('webpack'); //加载webpack依赖包
module.exports = {entry: ['webpack/hot/dev-server', path.resolve(__dirname, './development/main.js')], //入口文件并添加了热加载output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js' //输出文件},module: {loaders: [{test: /\.js?$/,exclude: /(node_modules|bower_components)/,loader: 'babel',query: {presets: ['es2015', 'react']} //将react编译成js文件},{ test: /\.css$/, loader: 'style-loader!css-loader' }, //打包css文件{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //编译sass文件{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} //对图片进行打包]},plugins: [new webpack.HotModuleReplacementPlugin()],resolve: {//自动扩展文件后缀名extensions: ['', '.js', '.json', '.scss', '.ts']}
};
main.js内容如下:
let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/index.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));
index.js内容如下:
var React = require('react');
var ProductBox;
ProductBox = React.createClass({render: function () {return (<div className="productBox">hello react&es2015&webpack!!!</div>);}
});module.exports = ProductBox;
index.html内容如下:
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>
将上面的文件写好后并放到对应文件夹内运行命令npm run build dev,成功后浏览器访问地址location:8080,就会显示出对应界面
结果:
hello react&es2015&webpack!!!
晚上写可能有很多内容漏了没解释详细,欢迎纠正!!!
webpack入门+react环境配置 1相关推荐
- webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
- WinPcap网络编程入门——0. 环境配置及系列介绍
WinPcap网络编程入门--0. 环境配置及系列介绍 系列教程章节直达: Winpcap网络编程入门--1. 获取设备列表: 说明:本教程适用于网络编程开发人员入门,将从底层分析 WinPcap 的 ...
- 【Jetson Nano 入门】环境配置汇总
文章目录 前言 一.镜像烧写 二.PWM风扇自动调速 三.使用MicroUSB在电脑打开终端 四.VNC实现局域网及网线直连通信 五.SSH文件传输 六.状态监控软件Jtop 七.检查CUDA.Ope ...
- 云计算入门教程环境配置
###########严重声明################# 本人支持一切正规软件开发行为,接受知识付费理念. 并坚决抵制盗版行为,用于学习交流的非盈利目的的,且法律允许且支持的条件下,可以进行相 ...
- 前端进阶(二)webpack开发服务器环境配置
webpack开发服务器 webpack 使用 babel 处理高版本的 js 语法 babel 的介绍 => 用于处理高版本 js语法 的兼容性 安装包 yarn add -D babel-l ...
- cordova入门——cordova环境配置
首先,搞清楚一个概念,phonegap与cordova之间的区别.其实, phoneGap是原先的名字,Adobe将phoneGap捐给apache之后,起了另外的一个名字--apache co ...
- 机器学习入门编程环境配置
1. 安装 Python3(可以直接安装anaconda而不用再去安装python和单独进行环境变量配置,并且在所有的新电脑上想要安装python,最好也是选择直接安装anaconda,不然后面用到其 ...
- Webpack 4 + React + Typescript 搭建启动模版
2019年是个崭新的开始,在过去半年的工作中我参与到公司一个大型项目的维护和开发中,深深的体会到了react项目中数据流向复杂,参数类型错乱带来的痛苦体验,于是在崭新的一年我决定拥抱Typescrip ...
- 《MongoDB极简教程》第一章 NoSQL简史 amp; MongoDB安装amp;环境配置
MongoDB 是一款开源的文档数据库,并且是业内领先的 NoSQL 数据库,用 C++ 编写而成. NoSQL (NoSQL = Not Only SQL ),意即"不仅仅是SQL&quo ...
最新文章
- SQL提交数据三种类型
- Android中链接到百度进行搜索
- 导入要素集到SDE数据库的方法以及使用GP工具的许可问题(转载)
- Arrays.sort()方法
- 读取带空格字符串小结
- 设计模式 试试 ( 事件代理 + factory Method+singleton+Observer)
- 反转单向链表(JAVA)
- mysql中如何迁移数据文件,迁移mysql数据文件存放位置
- Eclipse不编译java文件的解决方法
- 08 计算机视觉-opencv直方图与傅里叶变换
- 《财富》杂志推荐的75本商业必读书?
- 单目标跟踪——个人笔记
- 贝叶斯公式/贝叶斯法则/贝叶斯定理
- 【运筹学】(2)—预测
- 电子信息工程求职目标_应用电子专业求职信范文合集6篇
- hotspot源码角度看OOP之类属性的底层实现(一)
- 黑马程序员--C语言基础之--printf函数
- 三洋服务器Q系列报警代码,三洋伺服故障报警维修
- 菜鸟驿站巴枪APP下载
- 基于html+css的四张图片并排
热门文章
- 百度SEO emlog博客lu1.3模板
- 百度SEO站群PHP进销存源码ERP多仓库管理源码
- 计算机应用入学考试,本科【计算机应用】入学考试模拟试题.doc
- 【嘟嘟早教卡】 小程序源码分享带后台管理
- Spring Cloud微服务之业务物理删除(十)
- WebBrowser部分用法
- event.keyCode列表
- PHP 报错 Use of undefined constant prop_values - ass...
- Moodle:通过用户ID(user id) 获取用户权限
- wordpress提取文章(最新,最热,随机)