初学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",
    "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按什么样的体式格局构建前端工程，怎样打包等等，用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, 这几天忙着口试，没有更新，等有空我就写完他~）