最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己。
首先我创建了一个文件夹webpack-helloworld-demo
,之后的大部分操作都会在这个文件夹下进行。
1.初始化文件夹
npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退
2.搭建webpack环境
npm install webpack --save-dev //安装webpack依赖
--save
建议使用,这样当别人clone你的代码时,只需要npm install
就可以安装好所有需要的依赖,并且你也可以在你的package.json
文件夹中看到你使用的哪些依赖。
现在我们可以测试下webpack有没有安装成功,在文件夹根目录下创建三个文件,分别是entry.js
,bundle.js
,index.html
,文件内容分别如下。
//entry.js document.write('Hello World');
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <script type="text/javascript" src="/UploadFiles/2021-04-02/bundle.js">bundle.js内容为空
执行命令行:
webpack ./entry.js bundle.js
之后会发现bundle.js文件下有好多代码出现,这就是经过webpack打包后的文件。在浏览器打开index.html,页面会出现Hello World,webpack安装成功!
3.配置webpack
创建
webpack.config.js
文件,进行如下基本配置module.exports = { entry: "./entry.js", // 要打包的入口文件 output: { //打包后的文件 path: __dirname, //表示使用绝对路径 filename: "bundle.js" //输出文件名 }, module: { loaders: [ //用于加载一些静态文件夹(css样式,图片之类) { test: /\.css$/, loader: "style!css" }, { test: /\.jsx"text-align: center">
4.express下运行
npm install express --save-dev创建server.js
var express = require('express'); var app = express(); app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html app.listen(3000, function () { console.log('Example app listening on port 3000!'); });执行命令: webpack // 用于打包文件 node server.js // 开启服务器浏览器访问 http://localhost:3000/ , 页面显示Hello World,运行成功!
5.配置 React, ES6 & Babel 6
npm install react --save-dev npm install react-dom --save-dev npm install babel-loader --save-dev // 转换JSX npm install babel-core --save-dev // babel的核心包 npm install babel-preset-es2015-dev // es2015的babel预设 npm install babel-preset-react-dev // react的babel预设创建文件.babelrc
{ "presets": [ "es2015", "react" ] }接下来就是写react小例子测试啦,在entry.js写入:
import React, {Component} from 'react'; import {render} from "react-dom"; class HelloMessage extends React.Component { render() { return <div>Hello World</div>; } } render(<HelloMessage />, document.getElementById('app'));为了将组件渲染到页面,我们需要在index.html中添加一个相当于容器的div:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"></div> // 添加的div,渲染至div中 <script type="text/javascript" src="/UploadFiles/2021-04-02/bundle.js">浏览器访问 http://localhost:3000/ , 页面显示Hello World,运行成功!
现在我们的文件目录为:
至此我们就搭建好了一个简单的环境啦~
框架Github地址:https://github.com/DQing/webpack-helloworld-demo.git
大家在搭建框架时不要忘了小步提交。
还可以进行一些额外的配置,步骤其实都差不多
框架Github地址:https://github.com/DQing/jishiben.git
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]
- 《汽车发烧音乐精选CD18》[FLAC+CUE][7.1G]
- 郑希怡.2004-Perfect.Date【英皇娱乐】【FLAC分轨】
- 群星.1994-宝丽金超级孖宝2CD【宝丽金】【WAV+CUE】