打包后的目录结构:

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. Linux->Windows主机目录和文件名中文乱码恢复

    目录 Linux->Windows主机目录和文件名中文乱码恢复 声明 一. 乱码问题 二. 调试环境 三. 目录和文件名乱码恢复 3.1 可选方案 3.1.1 通过合适的编解码转换 3.1.2 ...

  2. Android开发训练之第五章第七节——Transmitting Network Data Using Volley

    Transmitting Network Data Using Volley GET STARTED DEPENDENCIES AND PREREQUISITES Android 1.6 (API L ...

  3. 【python】并查集

    转自:http://blog.csdn.net/rav009/article/details/12781899 # -*- coding: UTF-8 -*- class unionfind: def ...

  4. python使用selenium安装chromedriver的问题

    环境 win64位,python3.6, 问题与解决 说来也巧,今天无意中解决了两个多月前的问题,即用selenium调用chrome浏览器报错的问题:起因是在知乎中看到了一篇12306抢票的文章,用 ...

  5. PAT甲级1052 Linked List Sorting

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805425780670464 题意: 给定一些内存中的节点的地址,值 ...

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

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

  7. Older Versions Of Eclipse

    Older Versions Of Eclipse Need help with older versions of Eclipse? LTS Request The following are li ...

  8. MapReduce 找出共同好友

    这个前提需要注意:好友之间的关系是单向的,我的好友队列里有你,你的里面不一定有我.所以思考方式需要改变. 共同好友: 某两个人的好友队列里都有的人. 第一个mapper 和 reducer 简单说:找 ...

  9. [No0000B9]C# 类型基础 值类型和引用类型 及其 对象复制 浅度复制vs深度复制 深入研究2

    接上[No0000B5]C# 类型基础 值类型和引用类型 及其 对象判等 深入研究1 对象复制 有的时候,创建一个对象可能会非常耗时,比如对象需要从远程数据库中获取数据来填充,又或者创建对象需要读取硬 ...

  10. Diagnosing out of memory errors and memory leaks 内存泄露实例 C Java JavaScript 内存泄露

    小结: 1. 数据库连接池. JDBC语句和结果对象必须显式地关闭. 2. 电梯到目标楼层后地址是否被释放 When a button is pressed: Get some memory, whi ...