Skip to main content

Webpack 常用的插件

常用的 plugins#

编译html模板#

html-webpack-plugin

是一个插件，写在webpack配置中的plugins数组中 它是将html模板进行编译，并把webpack编译好的脚本注入到 html 页面里

  • 安装
npm install --save-dev html-webpack-plugin
  • 配置使用
// 引入const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {    ···    // 注意 publicPath:'dist/' 查看dist html中的scritp 标签的引入路径    module: {       ···    },    // 插件    plugins: [        new HtmlWebpackPlugin(            {              // 要根据 哪个 模板文件生成打包后的 html 文件              template: "./src/index.html"              title: "自定义title",                ···            }        )    ]}

版权声明 BannerPlugin#

在webpack中集成，所以不用单独安装。

  • 配置
// 引入const webpack = require('webpack')module.exports = {    ···    module: {       ···    },    // 插件    plugins: [        new webpack.BannerPlugin('最终版权归zgaungju所有 )    ]}

压缩 js#

  • 安装
npm i -D uglifyjs-webpack-plugin
  • 配置
// 引入const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {  plugins: [    new UglifyJsPlugin({      test: /\.js($|\?)/i,      // include: /\/includes/, // 包含      // exclude: /\/excludes/, // 不好含    })  ]}