资讯专栏INFORMATION COLUMN

react+webpack+跨域代理+多页面 初学心得分享

Chao / 483人阅读

摘要:初学,利用进行工程化开发管理,遇到一些问题,如多页面处理,跨域代理的设置,如何同时引入使用。这个命令生成的文件可以放到后端服务器指定的静态文件目录下,这些就是用来上线的文件。这两个文件夹下的代码文件就是为两个独立的页面准备的。

初学react,利用webpack进行工程化开发管理,遇到一些问题,如多页面处理,跨域代理的设置,如何同时引入使用jQuery。第一次试水,简单写了一个表格组件。

先照着react官网提供的教程使用create-react-app创建react项目(http://www.css88.com/react/do...)

</>复制代码

  1. npm install -g create-react-app
  2. create-react-app my-app
  3. cd my-app
  4. npm start

OK,第一个react程序跑起来了,然后第一个问题来了,这是一个单页应用,按照以往的开发经验,由于需要开发的平台会比较复杂,需要做成多页面,如何配置成多页面呢:

改造一下my-app目录下的package.json文件(这个文件决定了你前端工程化开发时候需要安装的依赖,包括react也是在这里安装的哦)
附上我的package.json:

</>复制代码

  1. {
  2. "name": "my-app",
  3. "version": "1.0.0",
  4. "description": "pack test",
  5. "main": "index.js",
  6. "dependencies": {
  7. "expose-loader": "^0.7.4",
  8. "jquery": "^3.2.1",
  9. "webpack": "^3.10.0",
  10. "react": "^16.2.0",
  11. "react-dom": "^16.2.0",
  12. "react-scripts": "1.1.1"
  13. },
  14. "devDependencies": {
  15. "babel-core": "^6.26.0",
  16. "babel-loader": "^7.1.2",
  17. "babel-preset-es2015": "^6.24.1",
  18. "babel-preset-react": "^6.24.1",
  19. "clean-webpack-plugin": "^0.1.16",
  20. "css-loader": "^0.28.7",
  21. "extract-text-webpack-plugin": "^3.0.0",
  22. "file-loader": "^1.0.0",
  23. "glob": "^7.1.2",
  24. "html-webpack-plugin": "^2.30.1",
  25. "postcss-loader": "^2.0.6",
  26. "style-loader": "^0.18.2",
  27. "url-loader": "^0.5.9",
  28. "jquery": "^3.2.1",
  29. "webpack": "^3.10.0",
  30. "webpack-dev-server": "^2.8.1"
  31. },
  32. "scripts": {
  33. "start": "webpack-dev-server --open",
  34. "build": "webpack"
  35. },
  36. "author": "albert",
  37. "license": "ISC"
  38. }

我们把原来目录下的node_modules文件夹删除掉,然后在package.json所在目录下跑

</>复制代码

  1. npm i

就会自动生成node_modules文件夹并安装我们在package.json里定义的那些依赖了。
package.json里可以看到我要安装jqeury依赖,后面会聊这个。另外想聊一下的是这一句

</>复制代码

  1. "scripts": {
  2. "start": "webpack-dev-server --open",
  3. "build": "webpack"
  4. }

这里我们指定了npm命令脚本,对应的运行命令分别是 npm start 和 npm run build(一定要加上run,初学跑的时候没带run,一直跑不出来,被这个懵圈了好久o(╥﹏╥)o)

npm start中我们指定了是用webpack的dev server来运行,会启动一个服务器。这个开发的时候用很爽,编辑了代码保存后会热更新,前端代码自动重新构建并通知浏览器刷新。此时打包的文件是在内存中生成的,所以不要费劲去目录下找了,你根本找不到o( ̄︶ ̄)o

npm run build运行后是用来真正生成webpack打包后的文件的,你可以指定输出目录,具体参考webpack.config.js。这个命令生成的文件可以放到后端服务器指定的静态文件目录下,这些就是用来上线的文件。
图片描述

再瞥一眼我的webpack.config.js,这个文件是用来告诉webpack按什么样的方式构建前端工程,如何打包等等,用create-react-app命令生成的目录结构里是没有这个文件的,需要自己新建一个,放在和package.json同级即可。
先贴一个完整的webpack.config.js,你可以不看,晚点再解释里面的一些部分。

</>复制代码

  1. const webpack = require("webpack");
  2. const glob = require("glob");
  3. const path = require("path");
  4. const HtmlWebpackPlugin = require("html-webpack-plugin");
  5. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  6. const CleanWebpackPlugin = require("clean-webpack-plugin");
  7. const webpackConfig = {
  8. entry: {},
  9. output:{
  10. // path:path.resolve(__dirname, "./dist/"),
  11. path:path.resolve("C:/wamp64/www/path/"),
  12. filename:"[name].[chunkhash:6].js"
  13. },
  14. //设置开发者工具的端口号,不设置则默认为8080端口
  15. devServer: {
  16. inline: true,
  17. port: 8181,
  18. proxy: {
  19. "/": {
  20. target: "http://localhost:80",
  21. secure: true,
  22. changeOrigin: true
  23. }
  24. }
  25. },
  26. module:{
  27. rules:[
  28. {
  29. test:/.js?$/,
  30. exclude:/node_modules/,
  31. loader:"babel-loader",
  32. query:{
  33. presets:["es2015","react"]
  34. }
  35. },
  36. {
  37. test: /.(scss|sass|css)$/,
  38. loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
  39. },
  40. {
  41. test: require.resolve("jquery"),
  42. use: [{
  43. loader: "expose-loader",
  44. options: "jQuery"
  45. },{
  46. loader: "expose-loader",
  47. options: "$"
  48. }]
  49. }
  50. ]
  51. },
  52. plugins: [
  53. new ExtractTextPlugin("[name].[chunkhash:6].css"),
  54. new CleanWebpackPlugin(
  55. ["path"], 
  56. {
  57. root: "C:/wamp64/www/",           
  58. verbose: true,           
  59. dry: false           
  60. }
  61. )
  62. ],
  63. };
  64. // 获取指定路径下的入口文件
  65. function getEntries(globPath) {
  66. const files = glob.sync(globPath),
  67. entries = {};
  68. console.log(files)
  69. files.forEach(function(filepath) {
  70. const split = filepath.split("/");
  71. const name = split[split.length - 2];
  72. entries[name] = "./" + filepath;
  73. });
  74. return entries;
  75. }
  76. const entries = getEntries("src/**/index.js");
  77. Object.keys(entries).forEach(function(name) {
  78. webpackConfig.entry[name] = entries[name];
  79. const plugin = new HtmlWebpackPlugin({
  80. filename: name + ".html",
  81. template: "./public/index.html",
  82. inject: true,
  83. chunks: [name]
  84. });
  85. webpackConfig.plugins.push(plugin);
  86. })
  87. module.exports = webpackConfig;

一.解决多页面问题

原来的目录结构如下,

调整一下目录结构,删掉原来的src目录下内容,新建两个文件夹,然后分别添加两个页面要用的源文件进去(如果想快速试验,可以直接把原来的例子中的src的内容放到两个文件夹下)。 这两个文件夹下的代码文件就是为两个独立的页面准备的。

我的目录结构如下,

未完,更新中... (最新更新时间2018/2/27, 这几天忙着面试,没有更新,等有空我就写完他~)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110117.html

相关文章

  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • Vue全家桶实现还原豆瓣电影wap版

    摘要:豆瓣电影版用全家桶仿写豆瓣电影版。原计划仿写完所有页面,碍于豆瓣的接口有限,实现页面也有限。由于公开的豆瓣接口具有访问次数限制,克隆到本地体验效果更加端访问已设置宽度适配。 douban-movie(豆瓣电影wap版) 用vue全家桶仿写豆瓣电影wap版。 最近在公司项目中尝试使用vue,但奈何自己初学水平有限,上了vue没有上vuex,开发过程特别难受。 于是玩一玩本项目,算是对相关...

    Near_Li 评论0 收藏0
  • webpack在前端项目中使用心得一二

    摘要:熟悉了之后,各种新旧项目,大小项目都能用耍的飞起。使用作为文件中的模板安装,记住不是,也不用配置,只需在标签中指定,就可以愉快的使用语法了,比起看起来简洁多了。 webpack做文件合并 使用构建工具非常常用一个功能就是合并js和css文件,gulp和grunt都是编写相应的任务来完成,转到webpack突然懵逼了,简单的项目怎么做文件合并呢?其实只需把多个js文件同时引入到main....

    qieangel2013 评论0 收藏0
  • 高级前端面试题大汇总(只有试题,没有答案)

    摘要:面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。 面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何...

    kviccn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<