Webpack 常用的插件

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/, // 不好含
    })
  ]
}