初学react，利用webpack进行工程化开发管理，遇到一些问题，如多页面处理，跨域代理的设置，如何同时引入使用jquery。第一次试水，简单写了一个表格组件。
先照着react官网提供的教程使用create-react-app创建react项目
npm install -g create-react-appcreate-react-app my-appcd my-appnpm start
登录后复制
OK，第一个react程序跑起来了，然后第一个问题来了，这是一个单页应用，按照以往的开发经验，由于需要开发的平台会比较复杂，需要做成多页面，如何配置成多页面呢：
改造一下my-app目录下的package.json文件（这个文件决定了你前端工程化开发时候需要安装的依赖，包括react也是在这里安装的哦）
附上我的package.json:
{ "name": "my-app", "version": "1.0.0", "description": "pack test", "main": "index.js", "dependencies": { "expose-loader": "^0.7.4", "jquery": "^3.2.1", "webpack": "^3.10.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-scripts": "1.1.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "clean-webpack-plugin": "^0.1.16", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.0.0", "glob": "^7.1.2", "html-webpack-plugin": "^2.30.1", "postcss-loader": "^2.0.6", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "jquery": "^3.2.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.8.1" }, "scripts": { "start": "webpack-dev-server --open", "build": "webpack" }, "author": "albert", "license": "ISC"}
登录后复制
我们把原来目录下的node_modules文件夹删除掉，然后在package.json所在目录下跑
npm i
登录后复制
就会自动生成node_modules文件夹并安装我们在package.json里定义的那些依赖了。
package.json里可以看到我要安装jqeury依赖，后面会聊这个。另外想聊一下的是这一句
"scripts": { "start": "webpack-dev-server --open", "build": "webpack" }
登录后复制
这里我们指定了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按什么样的方式构建前端工程，如何打包等等
const webpack = require('webpack');const glob = require('glob');const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin'); const webpackConfig = { entry: {}, output:{ // path:path.resolve(__dirname, './dist/'), path:path.resolve('C:/wamp64/www/path/'), filename:'[name].[chunkhash:6].js' }, //设置开发者工具的端口号,不设置则默认为8080端口 devServer: { inline: true, port: 8181, proxy: { '/': { target: 'http://localhost:80', secure: true, changeOrigin: true } } }, module:{ rules:[ { test:/.js?$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','react'] } }, { test: /.(scss|sass|css)$/, loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"}) }, { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] } ] }, plugins: [ new ExtractTextPlugin("[name].[chunkhash:6].css"), new CleanWebpackPlugin( ['path'], { root: 'C:/wamp64/www/', verbose: true, dry: false } ) ],}; // 获取指定路径下的入口文件function getEntries(globPath) { const files = glob.sync(globPath), entries = {}; console.log(files) files.forEach(function(filepath) { const split = filepath.split('/'); const name = split[split.length - 2]; entries[name] = './' + filepath; }); return entries;} const entries = getEntries('src/**/index.js'); Object.keys(entries).forEach(function(name) { webpackConfig.entry[name] = entries[name]; const plugin = new HtmlWebpackPlugin({ filename: name + '.html', template: './public/index.html', inject: true, chunks: [name] }); webpackConfig.plugins.push(plugin);}) module.exports = webpackConfig;
登录后复制
相关推荐：
Vue+webpack基础配置分享
Webpack服务器端代码打包实例详解
webpack、vue、node实现单页面代码分享
以上就是react、webpack、跨域代理多页面的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2786163.html
