大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
plugin
插件是 webpack
的支柱功能。webpack
自身也是构建于你在 webpack
配置中用到的相同的插件系统之上!
插件目的在于解决 loader
无法实现的其他事。
常用的插件
由于插件可以携带参数/选项,你必须在 webpack
配置中,向 plugins
属性传入一个 new
实例,接下来我们介绍几个常用的插件
BannerPlugin
将横幅添加到每个生成的块的顶部。一般用于添加版权声明
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: "dist/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
},
],
},
plugins: [
new VueLoaderPlugin(),
new webpack.BannerPlugin("最终版权归jkc所有")
],
};
最后我们进行打包,打包后的bundler.js
文件的最上方会出现如下的一行注释
/*! 最终版权归jkc所有 */
HtmlWebpackPlugin
目前我们的index.html
文件是存放在项目的根目录,但是我们真实发布项目的时候是发布的dist
文件夹下的内容,但是dist
文件夹下如果没有index.html
文件,那么打包的js文件也就没有意义了,所以我们需要将index.html
打包到dist
文件夹下,这个时候我们就可以使用插件HtmlWebpackPlugin
HtmlWebpackPlugin
会自动生成一个index.html
文件(可以指定模板生成),然后将打包的js文件自动通过script
标签插入到body
中。
使用插件前我们需要安装插件,命令如下:
npm install --save-dev html-webpack-plugin
安装完成以后,我们需要在webpack
中引用它,并对其进行配置
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入插件
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: "dist/"
},
resolve: {
extensions: ['.json', '.js', '.vue', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.png/,
type: 'asset'
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
],
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin(),
new webpack.BannerPlugin("最终版权归jkc所有"),
new HtmlWebpackPlugin({ template: 'index.html' }), // 配置插件,并提供了自己的模板选项,这里的index是与webpack.config.js同目录下自定义的模板文件
]
}
最后进行打包,打包后dist
目录下就会生成一个index.html
文件
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165728.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...