当前位置：
首页 >
vue中webpack默认配置_webpack中Entry与Output的基础配置
发布时间：2025/3/15
62
豆豆
生活随笔
收集整理的这篇文章主要介绍了
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的基础配置的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 流行歌单片机c语言编程,单片机6首音乐播
- 下一篇： vue弹出层滑动禁止背景跟着滑动_vue