【已解决】ReactJS中如何用webpack打包多个生成多个html

折腾：

【已解决】ReactJS的AdminLTE中添加登陆页面

期间，已经照葫芦画瓢，画了个login.html：

但是不知道，如何打包生成多个html。

react js webpack multiple html

react js webpack 多个html页面

Multiple entry points -> multiple html outputs? · Issue #218 · jantimon/html-webpack-plugin

multiple entry points

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

Multiple modules for multiple entry points in webpack config for reactjs app – Stack Overflow

webpack 多页面构建 · Issue #11 · shaozj/blog

基于webpack的前端工程化开发之多页站点篇（一） – 歪闹日志 – SegmentFault

多重入口 | React Webpack 小书

修改create-react-app支持多入口

然后此处经过折腾，基本上满足需求了：

【总结】

react-hot-boilerplate/webpack.config.js

var HtmlWebpackPlugin = require(‘html-webpack-plugin’);

let isProd = (process.env.NODE_ENV === ‘production’);

new HtmlWebpackPlugin({

template: ‘./src/index.template.ejs’,

filename: ‘index.html’,

chunks: [‘vendor’, ‘index’],

hash: true,

assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/`

}),

new HtmlWebpackPlugin({

template: ‘./src/login.template.ejs’,

filename: ‘login.html’,

hash: true,

chunks: [‘vendor’, ‘login’],

assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/`

}),

new CopyWebpackPlugin([

// { from: ‘./index.html’ },

// { from: ‘src/assets’, to: ‘dist’ },

{ from: ‘src/assets’, to: ‘assets’ },

])

module.exports = {

entry: {

index: ‘./src/index.entry.js’,

vendor : [

//https://github.com/gaearon/react-hot-loader/tree/master/docs#migration-to-30

‘babel-polyfill’, // Set up an ES6-ish environment

‘react-hot-loader/patch’,

‘./src/lib/adminlte/adminlte_app.js’

output: {

path: path.resolve(__dirname, ‘build’),

filename: ‘[name].js’,

publicPath: `/${curPublicPath}/`

devServer: {

// hot: true,

contentBase: path.resolve(__dirname, ‘build’),

publicPath: path.resolve(__dirname, `/${curPublicPath}/`),

// publicPath: path.resolve(__dirname, ‘/devServerPublicPath/’),

compress: true,

port: wdsListenPort,

historyApiFallback: true,

open: true,

openPage: `${curPublicPath}/`

…

rse_web/package.json

“scripts”: {

“dev”: “cross-env NODE_ENV=development webpack-dev-server –progress –colors –hot –inline”,

“lint”: “eslint src”,

“clean”: “rm -rf build/ build.zip”,

“package”: “zip -r build.zip build/”,

“prebuild”: “npm run clean”,

“build”: “cross-env NODE_ENV=production webpack -p –progress –colors”,

“postbuild”: “npm run package”

rse_web/src/login.template.ejs

<!DOCTYPE html>

<html>

<head>

<title>xxx后台管理系统</title>

<!– Tell the browser to be responsive to screen width –>

<!– Bootstrap 3.3.7 –>

<!– Font Awesome –>

<!– Ionicons –>

<!– Theme style –>

</head>

</div>

<!– jQuery 3 –>

<!– Bootstrap 3.3.7 –>

<!– jQuery DateTables –>

</body>

</html>

index.template.ejs

<!DOCTYPE html>

<html>

<head>

<% for (var chunk in htmlWebpackPlugin.files.css) { %>

<% } %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>

<% } %>

<title>xxx后台管理系统</title>

<!– Tell the browser to be responsive to screen width –>

<!– Bootstrap 3.3.7 –>

<!– Font Awesome –>

<!– Ionicons –>

<!– DataTables –>

<!– Theme style –>

<!– AdminLTE Skins. Choose a skin from the css/skins

folder instead of downloading all of them to reduce the load. –>

</head>

</div>

<!– <script src=”https://code.jquery.com/jquery-3.1.1.min.js” integrity=”sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=” crossorigin=”anonymous”></script> –>

<!– HtmlWebpackPlugin will generated code include index.js and vendor.bundle.js here –>

</body>

</html>

index.entry.js

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./pages/main/App’;

ReactDOM.render( <App />, document.getElementById(‘app_root’) );

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import Login from ‘./pages/login/login’;

ReactDOM.render( <Login />, document.getElementById(‘login_root’) );

然后去：

npm run build

后，即可生成对应的

build/login.html

<!DOCTYPE html>

<html>

<head>

<title>xxx后台管理系统</title>

<!– Tell the browser to be responsive to screen width –>

<!– Bootstrap 3.3.7 –>

<!– Font Awesome –>

<!– Ionicons –>

<!– Theme style –>

</head>

</div>

<!– jQuery 3 –>

<!– Bootstrap 3.3.7 –>

<!– jQuery DateTables –>

</html>

build/index.html

<!DOCTYPE html>

<html>

<head>

<title>xxx后台管理系统</title>

<!– Tell the browser to be responsive to screen width –>

<!– Bootstrap 3.3.7 –>

<!– Font Awesome –>

<!– Ionicons –>

<!– DataTables –>

<!– Theme style –>

<!– AdminLTE Skins. Choose a skin from the css/skins

folder instead of downloading all of them to reduce the load. –>

</div>

<!– <script src=”https://code.jquery.com/jquery-3.1.1.min.js” integrity=”sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=” crossorigin=”anonymous”></script> –>

<!– HtmlWebpackPlugin will generated code include index.js and vendor.bundle.js here –>

</html>

转载请注明：在路上 » 【已解决】ReactJS中如何用webpack打包多个生成多个html

Post Views: 1,342

【已解决】ReactJS中如何用webpack打包多个生成多个html

与本文相关的文章

Hi，您需要填写昵称和邮箱！