快捷導(dǎo)航

webpack構(gòu)建react多頁(yè)面應(yīng)用詳解

更新時(shí)間：2017年09月15日 14:48:37 作者：小然同學(xué)

這篇文章主要介紹了webpack構(gòu)建react多頁(yè)面應(yīng)用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

寫(xiě)這個(gè)的初衷是很難找一個(gè)簡(jiǎn)潔的項(xiàng)目腳手架，很多腳手架都有很多依賴，光看依賴就要很久，所以自己參照網(wǎng)上的內(nèi)容，弄個(gè)這么一個(gè)簡(jiǎn)單的多頁(yè)面的腳手架。

利用creat-react-app 新建一個(gè)react應(yīng)用

npm install -g create-react-app

然后創(chuàng)建一個(gè)項(xiàng)目

create-react-app demo

create-react-app會(huì)自動(dòng)初始化一個(gè)腳手架并安裝 React 項(xiàng)目的各種必要依賴，如果在過(guò)程中出現(xiàn)網(wǎng)絡(luò)問(wèn)題，請(qǐng)用cnpm淘寶鏡像安裝。

然后我們進(jìn)入項(xiàng)目并啟動(dòng)。

cd demo

然后啟動(dòng)項(xiàng)目

npm start

那就會(huì)看到如下頁(yè)面

然后進(jìn)入src/App.js，用下面代碼替換App.js中的代碼（因?yàn)樵趙ebpack中暫時(shí)不想處理圖片和icon）

import React, { Component } from 'react';
import './App.css';

class App extends Component {
 render() {
  return (
   <div className="App">
    <div className="App-header">
     <h2>Welcome to App</h2>
    </div>
    <p className="App-intro">
     To get started, edit <code>src/App.js</code> and save to reload.
    </p>
   </div>
  );
 }
}

export default App

然后將 index.js 中的內(nèi)容替換為如下代碼(刪除registerServiceWorker)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

然后刪除src下面的registerServiceWorker.js（該文件用于構(gòu)建pwa應(yīng)用用的，暫時(shí)我們用不了）和 logo.svg文件（不想處理圖片文件）和 App.test.js(用于測(cè)試用的)。

現(xiàn)在src/下面有四個(gè)文件。接下來(lái)，在src下面新建兩個(gè)文件夾 app1和 app2，分別將原來(lái)的四個(gè)文件拷貝進(jìn)入app1和app2。文件目錄如下：

接下來(lái)，進(jìn)入public文件下，刪除favicon.ico（不想處理）和 manifest.json(構(gòu)建pwa用的）,然后將index.html中的內(nèi)容用如下內(nèi)容替換

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <title>React App</title>
 </head>
 <body>
  <noscript>
   You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
 </body>
</html>

這個(gè)index.html就是我們的模版html。

進(jìn)入正題，開(kāi)始install webpack和配置webpack

1.安裝依賴。將package.json文件用下面的文件替代

{
 "name": "demo",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.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": "^3.5.6",
  "webpack-dev-server": "^2.8.1"
 },
 "scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack"
 }
}

2.刪除當(dāng)前目錄中的node_modules，然后重新在控制臺(tái)執(zhí)行

npm i

3.在根目錄下也就是／demo下新建一個(gè)webpack.config.js文件,寫(xiě)入如下代碼

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/'),
    filename:'[name].[chunkhash:6].js'
  },
  //設(shè)置開(kāi)發(fā)者工具的端口號(hào),不設(shè)置則默認(rèn)為8080端口
  devServer: {
    inline: true,
    port: 8181
  },
  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"})
      },
      
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].[chunkhash:6].css"),
    new CleanWebpackPlugin(
      ['dist'],　 
      {
        root: __dirname,    　　　　　　　　　　
        verbose: true,    　　　　　　　　　　
        dry:   false    　　　　　　　　　　
      }
    )
  ],
};

// 獲取指定路徑下的入口文件
function getEntries(globPath) {
  const files = glob.sync(globPath),
   entries = {};
  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;

4.然后用直接執(zhí)行如下代碼