plugins的介绍使用

最新推荐文章于 2023-06-17 17:43:08 发布

小李要加油鸭

最新推荐文章于 2023-06-17 17:43:08 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.csdn.net/LJiaJia595/article/details/114154679

版权

Plugins

扩张webpack本身的一些功能，他们会允许在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等。

HtmlwebpackPlugin

在打包结束后，自动生成一个html文件，并把打包生成的js抹开引入到该html中

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

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
  plugins: [
     new HtmlWebpackPlugin({
       title: "My App",
       filename: "app.html",
       template: "./src/html/index.html"
     }) 
  ]
};

<!--./src/html/index.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><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h1>html-webpack-plugin</h1>
</body>
</html>

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

clean-webpack-plugin

删除（清理）构建目录

npm install --save-dev clean-webpack-plugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
 ...
  plugins: [
    ...,
    new CleanWebpackPlugin(),
    ...
  ]
}

mini-css-extract-plugin

提取 CSS 到一个单独的文件中

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
 ...,
  module: {
   rules: [
    {
     test: /\.s[ac]ss$/,
     use: [
      {
       loader: MiniCssExtractPlugin.loader
     },
          'css-loader',
          'sass-loader'
        ]
   }
   ]
 },
  plugins: [
    ...,
    new MiniCssExtractPlugin({
     filename: '[name].css'
    }),
    ...
  ]
}

小李要加油鸭

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
plugins的介绍使用

Plugins扩张webpack本身的一些功能，他们会允许在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等。HtmlwebpackPlugin在打包结束后，自动生成一个html文件，并把打包生成的js抹开引入到该html中npm install --save-dev html -webpack-plugin// webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");module
复制链接

扫一扫