摘要:结合的具体使用我们一般是使用进行安装的,这里我为大家推荐一款淘宝出的,这个和差不多,但是比安装的要快很多安装命令搭建环境初始化一个文件安装全局安装局部安装安装来把格式的代码编译成安装来转译代码安装转移的插件,
React结合webpack的具体使用
我们一般是使用npm进行安装的,这里我为大家推荐一款淘宝出的cnpm,这个和npm差不多,但是比npm安装的要快很多;
安装命令
npm install cnpm -gd搭建webpack环境
初始化一个package.json文件
npm init -y
安装webpack
//全局安装 npm install webpack -gd //局部安装 npm install webpack --save-dev
安装babel-loader来把jsx格式的代码编译成javascript
cnpm install --save-dev babel-loader
安装babel-core来转译代码
cnpm install --save-dev babel-core
安装转移的插件,这个是为了把两个文件都转移到一个文件里面去
cnpm install babel-preset-env babel-preset-react --save-dev运行webpack转移文件
创建一个html文件,引入转移后生成的文件
React3
创建app.js文件,作为导入文件
import bar from "./bar"; bar();
创建bar.js文件,作为导出文件
export default function bar() { console.log(1); }
创建webpack.config.js文件,这个文件作为配置文件
module.exports = { entry: "./app.js", output: { filename: "bundle.js" } }
做完这个以后,我们就可以运行webpack了,
在命令行输入webpack就可以运行
此时index.html页面的控制台就会输出1;
注释:现在我们的webpack环境就搭建的差不多了,下面我们来进一步的了解webpack;
首先把bar.js改成HelloWorld.js;
安装两个react库,react和react-dom
这两个库可以一起安装 cnpm install react react-dom --save-dev
HelloWorld.js
import React from "react"; class HelloWorld extends React.Component{ render(){ return (Hello World!!!!) } } //export {HelloWorld as default}; export default HelloWorld;
app.js
import React from "react"; import ReactDOM from "react-dom"; import HelloWorld from "./components/HelloWorld"; ReactDOM.render(,document.getElementById("app"));
运行webpack --watch
在命令行里输入: webpack --watch
此时页面会显示:
注释:这里我们是用编辑器打开的,下面会通过服务器来打开index.html页面;
安装webpack-dev-server来起一个服务器
全局安装: npm install webpack-dev-server -gd 局部安装: npm install webpack-dev-server --save-dev
输入命令行,通过服务器打开页面
webpack-dev-server --content-base build/
现在的这个网页是打不开的,因为找不着index.html文件,所以我们需要重新整理一下文件,整理后的文件:
整理完文件后,需要修改一下webpack.config.js文件
module.exports = { entry: "./app.js", output: { filename: "build/bundle.js" //修改 } }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" }, ] }
修改完以后我们需要运行一下webpack --watch
在命令行输入: webpack --watch
然后运行server
webpack-dev-server --content-base build/
此时的页面和刚才的页面不同,此时的页面是用服务器打开的:
修改webpack.config.js文件
var path = require("path"); //添加 module.exports = { devtool:"source-map", entry: "./app.js", output: { path:path.resolve(__dirname,"build"), //添加 publicPath:"/assets/", //添加 filename: "bundle.js" }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" }, ] } }
修改index.html文件
React3 //修改
输入自动刷新命令
webpack-dev-server --content-base build/ --inline
webpack热更新此时我们的页面就可以自动刷新了:
安装react-hot-loader
cnpm install react-hot-loader --save-dev
修改webpack.config.js
var path = require("path"); module.exports = { devtool:"source-map", entry: "./app.js", output: { path:path.resolve(__dirname,"build"), publicPath:"/assets/", filename: "bundle.js" }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },//修改 ] } }
运行热更新
webpack-dev-server --content-base build/ --hot
webpack处理样式热更新和自动刷新的区别就是自动刷新是全部刷新,就相当于整个页面都刷新一次,而热更新是只刷新你指定的那个模块;
安装style-loader和css-loader
cnpm install style-loader css-loader --save-dev
整理文件
创建一个css文件夹,在文件夹里面创建一个main.css文件; - main.css: body{ background:red; }
修改webpack.config.js文件
var path = require("path"); module.exports = { devtool:"source-map", entry: "./app.js", output: { path:path.resolve(__dirname,"build"), publicPath:"/assets/", filename: "bundle.js" }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" }, { test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader" } //修改 ] } }
修改app.js文件
import React from "react"; import ReactDOM from "react-dom"; import HelloWorld from "./components/HelloWorld"; import "./css/main.css"; //修改 ReactDOM.render(,document.getElementById("app"));
修改index.html文件
React3 //修改
在命令行里运行
webpack-dev-server --content-base build/ --hot
webpack优化项目结构此时的页面和刚才的一样,只不过是整理了一下;
创建一个名为components的文件,把HelloWorld.js放进去,这个文件夹就作为模块文件;
修改app.js
import React from "react"; import ReactDOM from "react-dom"; import HelloWorld from "./components/HelloWorld"; //修改 import "./css/main.css"; ReactDOM.render(,document.getElementById("app"));
修改package.json
{ "name": "React3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start":" webpack-dev-server --content-base build/ --hot" //修改 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.4", "style-loader": "^0.18.2", "webpack": "^3.4.0", "webpack-dev-server": "^2.6.1" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" } }
此时我们就不用每一次都输入那么长的命令了,直接在命令行里输入 npm start就可以跑起来了;
看完了是不是感觉也没那么难呢!那就快来加入我的团队吧,微信二维码:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51046.html
摘要:结合的具体使用我们一般是使用进行安装的,这里我为大家推荐一款淘宝出的,这个和差不多,但是比安装的要快很多安装命令搭建环境初始化一个文件安装全局安装局部安装安装来把格式的代码编译成安装来转译代码安装转移的插件, React结合webpack的具体使用 我们一般是使用npm进行安装的,这里我为大家推荐一款淘宝出的cnpm,这个和npm差不多,但是比npm安装的要快很多; 安装命令 npm ...
摘要:结合的具体使用我们一般是使用进行安装的,这里我为大家推荐一款淘宝出的,这个和差不多,但是比安装的要快很多安装命令搭建环境初始化一个文件安装全局安装局部安装安装来把格式的代码编译成安装来转译代码安装转移的插件, React结合webpack的具体使用 我们一般是使用npm进行安装的,这里我为大家推荐一款淘宝出的cnpm,这个和npm差不多,但是比npm安装的要快很多; 安装命令 npm ...
摘要:安装配置加载器配置配置文件配置支持自定义的预设或插件只有配置了这两个才能让生效,单独的安装是无意义的。 showImg(https://segmentfault.com/img/bVbjGNY?w=2847&h=1931); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身...
摘要:前言时光飞逝,转眼又偷懒了一个多月什么是文件为动态链接库文件在中,许多应用程序并不是一个完整的可执行文件,它们被分割成一些相对独立的动态链接库,即文件,放置于系统中。 前言 (时光飞逝,转眼又偷懒了一个多月) 什么是DLL DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中,许多应用程序并不是一个完整的可执行文件,它们被分割成一些相对独立的动态链...
摘要:具体就不贴上来了,这里主要是利用采用的动态加载原理进行改造。首先,依赖与,所以最初的想法是采用结合的方式进行改写。这个过程实际是是的动态加载。 dva现在是构建在umi基础上,由于项目的原因,我并没有采用umi架构,而是自己使用webpack4来进行打包,只用dva负责数据流的处理,dva原来的dynamic在webpack4上编译会有一堆错误。具体就不贴上来了,这里主要是利用webp...
阅读 1515·2023-04-26 02:08
阅读 3106·2021-10-14 09:42
阅读 7050·2021-09-22 15:34
阅读 3218·2019-08-30 13:16
阅读 2693·2019-08-26 13:49
阅读 1325·2019-08-26 11:59
阅读 1227·2019-08-26 10:31
阅读 2125·2019-08-23 17:19