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

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

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

npm install -g create-react-app
create-react-app my-app

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

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;

一.解决多页面问题

原来的目录结构如下，

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

我的目录结构如下，

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

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

猜你在找的React相关文章

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