當前位置：
首頁 >
vue中webpack默认配置_webpack中Entry与Output的基础配置
發布時間：2025/3/15
34
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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首音乐播
- 下一篇： Hough变换原始形式-直线检测