webpack多页面打包配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html template</title>
</head>
<body>
<div id='root'></div>
</body>
</html>
index.js
import React, {Component} from 'react';
import ReactDom from 'react-dom';
class App extends Component{
render() {
return (
<div>this is home page</div>
)
}
}
ReactDom.render(<App/>, document.getElementById('root'));
list.js
import React, {Component} from 'react';
import ReactDom from 'react-dom';
class App extends Component{
render() {
return (
<div>this is list page</div>
)
}
}
ReactDom.render(<App/>, document.getElementById('root'));
webpack.common.js
const plugins = [
// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
chunks: ['vendors', 'main']
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'list.html',
chunks: ['vendors', 'list']
}),
new CleanWebpackPlugin()
];
这里新建两个HtmlWebpackPlugin。HtmlWebpackPlugin是用来自动生成静态页面用的.模板是index.html，生成的文件名是index.html和list.html，里面植入的chunks分别是main和list。那么实际上多个页面就是多个HtmlWebpackPlugin
webpack多页面打包配置的更多相关文章
- VUE 多页面打包webpack配置
思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- webpack 3.X学习之多页面打包
简介 我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包 我们知道要打包 ...
- webpack 多页面支持 & 公共组件单独打包
webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...
- Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化
0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...
- webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源
webpack多页面应用打包问题:如果在项目里新增页面,pages目录中插入一个页面文件,然后打包代码,在webpack3中,新增页面文件上方文件打包出来的JS文件内容全部会改变,点击查看比对,发现问 ...
- webpack + vuecli多页面打包基于（vue-template-admin）修改
转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...
- 规范开发目录 及 webpack多环境打包文件配置
规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...
- 【nodejs代理服务器二】nodejs webpack打包配置踩坑总结
接着上篇用Nodejs开发web代理,防止web渗透.如果部署到正式环境,需要进行打包配置. 我在用webpack打包配置中遇到了几个错误,总结如下: webpack环境变量问题 https://ww ...
随机推荐
- CF1281B Azamon Web Services
思路: 贪心,找到将s至多交换一次所能得到的字典序最小的字符串,再与c比较. 实现: #include <bits/stdc++.h> using namespace std; int m ...
- 【GStreamer开发】GStreamer基础教程12——流
目标 直接播放Internet上的文件而不在本地保存就被称为流播放.我们在前面教程里已经这样做过了,使用了http://的URL.本教程展示的是在播放流的时候需要记住的几个点,特别是: 如何设置缓冲 ...
- Qt5.编译错误.error: C2338: The slot requires more arguments than the signal provides.
1.Qt563x86vs2015,遇到如下 编译错误: error: C2338: The slot requires more arguments than the signal provides. ...
- [BJOI2019] 奥术神杖 [取log+AC自动机+dp]
题面 传送门 思路 首先,看到这个乘起来开根号的形式,应该能想到用取$\log$的方式做一个转化: $\sqrt[n]{\prod_i a_i}=\frac{1}{n}\sum_i \log_b a_ ...
- LVS-TUN模式
TUN模式: 其实数据转发原理和上图是一样的,不过这个我个人认为主要是位于不同位置(不同机房):LB是通过隧道进行了信息传输,虽然增加了负载,可是因为地理位置不同的优势,还是可以参考的一种方案: 优点 ...
- mysql函数concat与group_concat使用说明
mysql函数concat与group_concat使用说明concat()函数<pre>mysql> select concat(',',name,',') from `user` ...
- 2019.10.28 IDEA入门指南(很多人问补充一篇)
Idea快速入门指南 1.安装 1.1.安装 我们使用的是最新的2017.3.4版本: 双击打开, 选择一个目录,最好不要中文和空格: 然后选择桌面快捷方式,请选择64位: 然后选择安装: 开始安装: ...
- 软件素材---C语言函数不确定个数的入参的处理
1 : #用来把参数转换成字符串 #define P(A) printf("%s:%d\n",#A,A);int main(int argc, char **argv) { ...
- [Oracle] - 使用 DBMS_UTILITY 查看异常详情
DBMS_UTILITY.FORMAT_ERROR_BACKTRACE说明:这是在Oracle 10g数据库引入的,DBMS_UTILITY.FORMAT_ERROR_BACKTRACE内置函数返回一 ...
- Python27之集合
集合说:“在我的世界里,你就是唯一” 一.集合的概念和使用 集合的概念和数学里数学里集合的概念是一致的,都是一组元素的集,且元素之间不能重复.元素必须是不可变的数据类型,例如元组也可以作为其中的一个元 ...