打包后的目录结构:

webpack.config.js

// path 模块提供了一些用于处理文件路径
const path = require('path');
// fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
// 访问内置的插件
const webpack = require('webpack');
// cnpm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
// cnpm install clean-webpack-plugin --save-dev
const CleanWebpackPlugin = require("clean-webpack-plugin"); /**
* webpack配置
* @type {Object}
*/
const option = {}; /**
* 入口
* @type {Object}
*/
option.entry = {};
/**
* 出口
* @type {Object}
*/
option.output = {};
// 打包根路径
option.output.path = path.resolve("./dist");
// 打包后js文件的相对路径
// option.output.filename = "js/[name]/index_[chunkhash:8].js";
option.output.filename = "js/[name].[chunkhash].js";
/**
* 打包类型
* @type {String}
*/
option.devtool = "eval-source-map";
/**
* 本地服务器配置
* @type {Object}
*/
option.devServer = {};
// 本地服务器根路径
option.devServer.contentBase = "./public";
// 是否记录历史
option.devServer.historyApiFallback = false;
// 是否实时刷新
option.devServer.inline = true;
// 监听端口
option.devServer.port = 8080;
/**
* 插件
* @type {Array}
*/
option.plugins = [];
// BannerPlugin插件
option.plugins.push(new webpack.BannerPlugin('版权所有,翻版必究'));
// 清除文件的CleanWebpackPlugin插件
option.plugins.push(new CleanWebpackPlugin(['dist/*.*','dist/js/*.js'],{
root:__dirname,
verbose:true,
dry:false
})); /**
* 测试多入口
* key值:打包后的文件name
* value值:源代码中的文件name
*/
option.entry.index = './src/main.js'; // => js/[name].[chunkhash].js => js/index.ff1e318532ae5fd984de.js
option.entry.a = './src/aa.js'; // => js/[name].[chunkhash].js => js/a.010a88238103e5fa9139.js
option.entry.b = './src/bb.js'; // => js/[name].[chunkhash].js => js/b.9f92cb4ee4ecd280c3af.js /**
* 测试多个html文件
* template : 源代码中的html文件
* filename : 打包后的html文件
* chunks : 要引入打包后的哪些js文件,从entry的key值里面找寻
*/
option.plugins.push(new HtmlWebpackPlugin({
template:'./src/aa/index.html',
filename:'aa_index.html',
chunks:['a']
}));
option.plugins.push(new HtmlWebpackPlugin({
template:'./src/bb/index.html',
filename:'bb_index.html',
chunks:['b']
}));
option.plugins.push(new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['index','a','b']
})); //导出
module.exports = option;

webpack打包多个入口文件的更多相关文章

  1. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  2. webpack解惑:多入口文件打包策略

    本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包 ...

  3. webpack打包指定HTML的文件并引入指定的chunks

    1. 安装 html-webpack-plugin npm install html-webpack-plugin --save-dev 2. 在webpack.config.js中配置 const ...

  4. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  5. webpack.config.js====entry入口文件的配置

    1.  一般是采用对象语法: entry: { index: './src/default/js/index.js' }, https://webpack.css88.com/concepts/ent ...

  6. webpack打包文件

    npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...

  7. webpack打包后的文件

    用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...

  8. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  9. webpack打包非模块化js

    本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default f ...

随机推荐

  1. 【转载】Eclipse快捷键 10个最有用的快捷键

    Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.    ...

  2. (转)mysql百万级以上查询优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  3. 正则表达式中,[\s\S]* 什么意思

    https://blog.csdn.net/haoyuedangkong_fei/article/details/53781936 例如:[a-z]表示从a到z之间的任意一个. 不是这样的吗?谁能给我 ...

  4. hdu2328 Corporate Identity【string库使用】【暴力】【KMP】

    Corporate Identity Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  5. ML.NET教程之情感分析(二元分类问题)

    机器学习的工作流程分为以下几个步骤: 理解问题 准备数据 加载数据 提取特征 构建与训练 训练模型 评估模型 运行 使用模型 理解问题 本教程需要解决的问题是根据网站内评论的意见采取合适的行动. 可用 ...

  6. Codeforces 1132C - Painting the Fence - [前缀和优化]

    题目链接:https://codeforces.com/contest/1132/problem/C 题意: 栅栏有 $n$ 个节,有 $q$ 个人可以雇佣来涂栅栏,第 $i$ 个人可以涂第 $l_i ...

  7. [No0000158]思维模型1-20

    [No0000158]思维模型1-20.7z 思维模型No1|第一性原理 第一原理(又叫第一性原理)是个今年很火的概念,最早由亚里士多德提出,它相当于数学中的公理,即在每一个系统的探索中,存在第一原理 ...

  8. [No000014C]让大脑高效运转的24个技巧

    内容来译自David Rock “Your Brain at Work” and Nir Eyal, NirAndFar.com. Nir Eyal 是<上瘾>这本书的作者. 如何抓住转瞬 ...

  9. [No0000D7]img生成器.bat合并所有图片到html网页中

    @ECHO OFF IF EXIST %~nx0.html DEL /F /Q %~nx0.html ECHO ^<html^>^<head^>^<title^>% ...

  10. GIS软件相关安装(持续更新)

    软件安装是GIS专业的必修课,总会忘记步骤,在此汇总 1.oracle ①无法登录 管理员登录 sqlplus sys/密码 as sysdba https://www.linuxidc.com/li ...