webpack構建react多頁面應用

時間 2019-12-12

原文原文鏈接

寫這個的初衷是很難找一個簡潔的項目腳手架，不少腳手架都有不少依賴，光看依賴就要好久，因此本身參照網上的內容，弄個這麼一個簡單的多頁面的腳手架。javascript

利用creat-react-app 新建一個react應用

npm install -g create-react-app

而後建立一個項目css

create-react-app demo

create-react-app會自動初始化一個腳手架並安裝 React 項目的各類必要依賴，若是在過程當中出現網絡問題，請用cnpm淘寶鏡像安裝。
而後咱們進入項目並啓動。html

cd demo

而後啓動項目java

npm start

那就會看到以下頁面node

E84870BA-D45F-4947-AF52-1425143E6225.png

而後進入src/App.js，用下面代碼替換App.js中的代碼（由於在webpack中暫時不想處理圖片和icon）react

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 中的內容替換爲以下代碼(刪除registerServiceWorker)webpack

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（該文件用於構建pwa應用用的，暫時咱們用不了）和 logo.svg文件（不想處理圖片文件）和 App.test.js(用於測試用的)。
如今src/下面有四個文件。接下來，在src下面新建兩個文件夾 app1和 app2，分別將原來的四個文件拷貝進入app1和app2。文件目錄以下：web

53337069-7D74-40F6-BF8C-AF739BD08B48.png

接下來，進入public文件下，刪除favicon.ico（不想處理）和 manifest.json(構建pwa用的）,而後將index.html中的內容用以下內容替換npm

<!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>

這個index.html就是咱們的模版html。json

進入正題，開始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.刪除當前目錄中的node_modules，而後從新在控制檯執行

npm i

3.在根目錄下也就是／demo下新建一個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/'), filename:'[name].[chunkhash:6].js' }, //設置開發者工具的端口號,不設置則默認爲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.而後用直接執行以下代碼

npm run build

成功在dist中看到你的兩個頁面app1和app2.
若是要本身調試用直接啓用npm run start,而後在localhost:8181/app1.html查看頁面進行調試。

做者：小然同窗連接：https://www.jianshu.com/p/ee8aad48bf91來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。