webpack插件

07_插件

webpack在编译的过程中需要一些工具,使webpack变得更强大,而这些插件称之为插件
插件地址:https://webpack.docschina.org/plugins/

网页模板插件-HtmlWebpackPlugin
HtmlWebpackPlugin 简化了 HTML 文件的创建,以便为你的 webpack 包提供服务。你可以让该插件为你生成一个 HTML 文件。
可以自动将编译后的文件,装入我们的模板,并生成新的文件

安装
npm install --save-dev html-webpack-plugin

配置

[precode]const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin()],
};

[/precode]

配置参数说明
[precode]plugins : [
new HtmlWebpackPlugin({
template:'./public/index.html', //设置html的模板
filename:'app.html', //生成文件的名称
inject:'body' //JS输入的位置
})
],[/precode]

模板传参

前端模板引入方式

[precode]<title><%=htmlWebpackPlugin.options.title%></title>[/precode]

配置文件修改

[precode]plugins : [
new HtmlWebpackPlugin({
title:'webpack demo',
template:'./public/index.html', //设置html的模板
filename:'app.html', //生成文件的名称
inject:'body' //JS输入的位置
})
][/precode]

编译后,title会填充设置的属性内容

[precode]<title>webpack demo</title>[/precode]

css文件抽离 - MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件

本插件基于 webpack v5 的新特性构建,并且需要 webpack 5 才能正常工作

首先,你需要安装 mini-css-extract-plugin

npm i -D mini-css-extract-plugin

配置插件

[precode]const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};

[/precode]

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>