摘要：初學(xué)，利用進(jìn)行工程化開(kāi)發(fā)管理，遇到一些問(wèn)題，如多頁(yè)面處理，跨域代理的設(shè)置，如何同時(shí)引入使用。這個(gè)命令生成的文件可以放到后端服務(wù)器指定的靜態(tài)文件目錄下，這些就是用來(lái)上線的文件。這兩個(gè)文件夾下的代碼文件就是為兩個(gè)獨(dú)立的頁(yè)面準(zhǔn)備的。

初學(xué)react，利用webpack進(jìn)行工程化開(kāi)發(fā)管理，遇到一些問(wèn)題，如多頁(yè)面處理，跨域代理的設(shè)置，如何同時(shí)引入使用jQuery。第一次試水，簡(jiǎn)單寫(xiě)了一個(gè)表格組件。

先照著react官網(wǎng)提供的教程使用create-react-app創(chuàng)建react項(xiàng)目（http://www.css88.com/react/do...）

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

cd my-app
npm start

OK，第一個(gè)react程序跑起來(lái)了，然后第一個(gè)問(wèn)題來(lái)了，這是一個(gè)單頁(yè)應(yīng)用，按照以往的開(kāi)發(fā)經(jīng)驗(yàn)，由于需要開(kāi)發(fā)的平臺(tái)會(huì)比較復(fù)雜，需要做成多頁(yè)面，如何配置成多頁(yè)面呢：

改造一下my-app目錄下的package.json文件（這個(gè)文件決定了你前端工程化開(kāi)發(fā)時(shí)候需要安裝的依賴，包括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"
}

我們把原來(lái)目錄下的node_modules文件夾刪除掉，然后在package.json所在目錄下跑

npm i

就會(huì)自動(dòng)生成node_modules文件夾并安裝我們?cè)趐ackage.json里定義的那些依賴了。
package.json里可以看到我要安裝jqeury依賴，后面會(huì)聊這個(gè)。另外想聊一下的是這一句

"scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }

這里我們指定了npm命令腳本，對(duì)應(yīng)的運(yùn)行命令分別是 npm start 和 npm run build(一定要加上run，初學(xué)跑的時(shí)候沒(méi)帶run，一直跑不出來(lái)，被這個(gè)懵圈了好久o(╥﹏╥)o)

npm start中我們指定了是用webpack的dev server來(lái)運(yùn)行，會(huì)啟動(dòng)一個(gè)服務(wù)器。這個(gè)開(kāi)發(fā)的時(shí)候用很爽，編輯了代碼保存后會(huì)熱更新，前端代碼自動(dòng)重新構(gòu)建并通知瀏覽器刷新。此時(shí)打包的文件是在內(nèi)存中生成的，所以不要費(fèi)勁去目錄下找了，你根本找不到o(￣︶￣)o

npm run build運(yùn)行后是用來(lái)真正生成webpack打包后的文件的，你可以指定輸出目錄，具體參考webpack.config.js。這個(gè)命令生成的文件可以放到后端服務(wù)器指定的靜態(tài)文件目錄下，這些就是用來(lái)上線的文件。
圖片描述

再瞥一眼我的webpack.config.js，這個(gè)文件是用來(lái)告訴webpack按什么樣的方式構(gòu)建前端工程，如何打包等等，用create-react-app命令生成的目錄結(jié)構(gòu)里是沒(méi)有這個(gè)文件的，需要自己新建一個(gè)，放在和package.json同級(jí)即可。
先貼一個(gè)完整的webpack.config.js，你可以不看，晚點(diǎn)再解釋里面的一些部分。

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"
  },
  //設(shè)置開(kāi)發(fā)者工具的端口號(hào),不設(shè)置則默認(rèn)為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;

一.解決多頁(yè)面問(wèn)題

原來(lái)的目錄結(jié)構(gòu)如下，

調(diào)整一下目錄結(jié)構(gòu)，刪掉原來(lái)的src目錄下內(nèi)容，新建兩個(gè)文件夾，然后分別添加兩個(gè)頁(yè)面要用的源文件進(jìn)去（如果想快速試驗(yàn)，可以直接把原來(lái)的例子中的src的內(nèi)容放到兩個(gè)文件夾下）。 這兩個(gè)文件夾下的代碼文件就是為兩個(gè)獨(dú)立的頁(yè)面準(zhǔn)備的。

我的目錄結(jié)構(gòu)如下，

未完，更新中... （最新更新時(shí)間2018/2/27, 這幾天忙著面試，沒(méi)有更新，等有空我就寫(xiě)完他~）