當(dāng)前位置：
首頁(yè) >
vue中webpack默认配置_webpack中Entry与Output的基础配置
發(fā)布時(shí)間：2025/3/15
52
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue中webpack默认配置_webpack中Entry与Output的基础配置
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本文銜接上一篇文章：
不睡覺(jué)的怪叔叔：webpack的插件?zhuanlan.zhihu.com一、多入口打包的配置
webpack支持多入口的打包操作嗎？答案是肯定的！
讓我們修改webpack.config.js:
webpack.config.js:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 導(dǎo)入HtmlWebpackPlugin const CleanWebpackPlugin = require('clean-webpack-plugin'); // 導(dǎo)入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 // 當(dāng)圖片小于10kb時(shí)，使用base64的方式進(jìn)行打包}}]},{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', // 將自動(dòng)生成的html文件的文件名改為dist.htmltemplate: './src/template.html' // 模板}),new CleanWebpackPlugin()] };現(xiàn)在有兩個(gè)入口，分別是main和sub，而出口文件通過(guò)ouput中filename的設(shè)置，也將分別根據(jù)entry中的chunk name（也就是main和sub）來(lái)命名。
進(jìn)行打包操作，看看是不是這樣：
果然根據(jù)兩個(gè)入口文件打包出了兩個(gè)出口文件！
然后打開(kāi)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也將生成的兩個(gè)出口文件都自動(dòng)引入了。
二、設(shè)置公共路徑
如果想讓dist.html中對(duì)js文件的引入中加入公共路徑，比如像這樣：
<script type="text/javascript" src="e://webpack/dist/main.js"></script><script type="text/javascript" src="e://webpack/dist/sub.js"></script>這該怎么設(shè)置呢？
很簡(jiǎn)單，直接設(shè)置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', // 設(shè)置公共路徑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']}] }]} }進(jìn)行打包操作后，打開(kāi)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>果然增加了公共路徑！
總結(jié)
以上是生活随笔為你收集整理的vue中webpack默认配置_webpack中Entry与Output的基础配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 流行歌单片机c语言编程,单片机6首音乐播
- 下一篇： vue弹出层滑动禁止背景跟着滑动_vue