vue中webpack默认配置_webpack中Entry与Output的基础配置

本文衔接上一篇文章：

不睡觉的怪叔叔：webpack的插件zhuanlan.zhihu.com

一、多入口打包的配置

webpack支持多入口的打包操作吗？答案是肯定的！

让我们修改webpack.config.js:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPluginmodule.exports = {mode: 'development',entry: {main: './src/index.js',sub: './src/index.js'               },                output: {filename: '[name].js',                path: path.resolve(__dirname, 'dist')    },module: {rules: [{test: /.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符use: [{loader: 'url-loader',               // 使用的loaderoptions: {limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包}}]},{test: /.scss$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 2}  },'sass-loader','postcss-loader']},{test: /.(woff|woff2|eot|ttf)$/,use: ['file-loader']}]},plugins: [new HtmlWebpackPlugin({filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.htmltemplate: './src/template.html'     // 模板}),new CleanWebpackPlugin()]
};

现在有两个入口，分别是main和sub，而出口文件通过ouput中filename的设置，也将分别根据entry中的chunk name（也就是main和sub）来命名。

进行打包操作，看看是不是这样：

果然根据两个入口文件打包出了两个出口文件！

然后打开dist.html：

dist.html：

<!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>Document</title>
</head>
<body><div id="webContent"></div>
<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="sub.js"></script></body>
</html>

dist.html也将生成的两个出口文件都自动引入了。

二、设置公共路径

如果想让dist.html中对js文件的引入中加入公共路径，比如像这样：

<script type="text/javascript" src="e://webpack/dist/main.js"></script><script type="text/javascript" src="e://webpack/dist/sub.js"></script>

这该怎么设置呢？

很简单，直接设置webpack.config.js中的output即可：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {mode: 'development',entry: {main: './src/index.js',         sub: './src/index.js'              },output: {publicPath: 'e://webpack/dist',         // 设置公共路径filename: '[name].js',                 path: path.resolve(__dirname, 'dist')   },plugins:[new HtmlWebpackPlugin({filename: 'dist.html',          template: './src/template.html' }),new CleanWebpackPlugin()                  ],module: {rules: [{rules: [{test: /.(png|svg|jpg|gif)$/,  use: [{loader: 'url-loader',     options: {limit: 1024            }}]},{test: /.scss$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 2}},'sass-loader','postcss-loader']},{test: /.(woff|woff2|eot|ttf)$/,use: ['file-loader']}]    }]}
}

进行打包操作后，打开dist.html:

<!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>Document</title>
</head>
<body><div id="webContent"></div>
<script type="text/javascript" src="e://webpack/dist/main.js"></script><script type="text/javascript" src="e://webpack/dist/sub.js"></script></body>
</html>

果然增加了公共路径！

vue中webpack默认配置_webpack中Entry与Output的基础配置相关推荐

LaTeX中表格默认在页面中置顶怎么取消？
LaTeX中表格默认在页面中置顶怎么取消? 表格.图都默认在这一页置顶,已尝试过以下方法均不行: 1.[htbp]调节方式,无论如何调节没有任何变化 2.\usepackage{float} + [H ...
交华为换机access配置_华为交换机Hybrid接口及基础配置
一.回顾VLAN VLAN基本概念 VLAN即虚拟局域网,是将一个物理的LAN在逻辑上划分成多个广播域(多个VLAN)的通信技术.VLAN内的主机间可以直接通信,而VLAN间不能直接互通,从而将广播报 ...
ensp配置access口_eNSP仿真软件之VLAN基础配置及Access接口
★Access接口是交换机上用来连接用户主机的接口. 实验内容: 实验步骤: (1) 打开仿真软件eNSP,新建拓扑.根据实验内容建立如下实验拓扑图. (2) 按照如下的编址表对每 ...
vue中webpack默认配置_Vue-cli 中 Webpack 配置优化（一）
一.前言最近一段时间在学习 Webpack 方面的知识.在学习的过程中主要配置的是 webpack.config.js 文件. 但是在 Vue-cli 3.x 下,已经对 Webpack 做了深度的 ...
webpack devserver配置_webpack中webpack-dev-server的contentBase和index属性实测
在配置webpack时,在webpack-dev-server的配置中有这样两个属性contentBase和index.例子如下(同时配有官方文档): devServer: {host: '127.0 ...
在html中 position默认值,CSS 中的 position 属性
可能对CSS 稍微有点了解的人都知道position这个属性,妈蛋不就一个position么,有毛可说的.可别小看position,position属性有那几个值,这个可是facebook 面试的第一 ...
初始化环境配置：CentOS 7.4x64 系统安装及基础配置
1.安装CentOS操作系统 ① 在进入系统引导后,会进入文字界面,选择install CentOS7 (用键盘上的方向键↑.↓来选择要执行的操作,白色字体表示选中,按下回车,进入下一步操作) ② ...
中兴交换机配置telnet连接_交换机入门级别的基础配置，基础配置也非常重要，一分钟了解下...
一.配置要求 1.主机名更改为cisco 2.完成交换机IP地址配置,IP地址为202.119.249.250 255.255.255.0, 网关为202.119.249.2 3.MAC地址绑定,ma ...
Webpack 基础配置 Vue+Ts
写在前面多亏上次 Webpack打包类库踩坑(上期文章),让我重新想起来 Webpack 等相关打包工具的重要性,稍微做了下调研,发现其实很多稍微有些工作经验的人,对于 Webpack 的了解程度也 ...

vue中webpack默认配置_webpack中Entry与Output的基础配置

一、多入口打包的配置

二、设置公共路径

vue中webpack默认配置_webpack中Entry与Output的基础配置相关推荐

最新文章

热门文章