webpack--插件

插件plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

可以这样理解: loader的关注点在某种类型的文件编码解析上,插件plugin是关注某一个功能点:比如托管服务器,错误语法检测,挂载打包代码到模板文件等等.

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

EslintWebpackPlugin

eslint插件是一个非常强大的语言查错工具, vscode 编辑器中有提供 eslint 插件，下载插件并启用，自动就可以检测代码的语法错误，但是它只在你写代码的时候提示,我们希望打包项目的时候有相关提示,就可以配置它.

eslint-webpack-plugin插件就是使用 eslint 来查找和修复 JavaScript 代码中的问题。

eslint-webpack-plugin 3.0 仅支持 webpack 5。对于 webpack 4 请查看 2.x 分支。

环境准备:

npm install eslint-webpack-plugin --save-dev

如果未安装 eslint >= 7 ，你还需先通过 npm 安装：

npm install eslint --save-dev

插件配置:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {

  // ...

  plugins: [new ESLintPlugin(options)],

  // ...

};

//options的参数配置:

context:__dirname+"/src" //指定文件根目录

extensions:String|Array[String] //指定需要检查的扩展名.不配置默认为"js"

exclude:"node_modules" //指定需要排除的文件及目录。必须是相对于 options.context 的相对路径。

files:String|Array[String] //指定目录、文件或 globs ，必须是相对于 options.context 的相对路径。 如果是目录则递归查找所有匹配 options.extensions 选项的文件。

 

HtmlWebpackPlugin

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

安装:

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

插件配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: 'index.js',

  output: {

    path:__dirname+'/dist',

    filename: 'bundle.js',

  },

  plugins: [new HtmlWebpackPlugin()],

};

//该插件将为你生成一个HTML5 文件， 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。

//但是每次生成的模板都是新的

 

如果希望用自己的html文件作为模板

可以在参数中进行配置: https://github.com/jantimon/html-webpack-plugin#options

module.exports = {

    entry: 'index.js',

    output: {

      path:__dirname+'/dist',

      filename: 'bundle.js',

    },

    plugins: [new HtmlWebpackPlugin({

              title: "hqyj-app", //html的标题默认为"Webpack App",

              filename: "index.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"

              template: __dirname + "/public/index.html", //模板html文件的路径,

              inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,

              publicPath: "./", //The publicPath used for script and link tags,

              favicon:__dirname + "/public/favicon.ico", //打包前前前小图标的路径,默认为:"",

              //"洗澡":压缩项配置

              // minify:true,

              minify: {

                  collapseWhitespace: true, //是否压缩HTML:空格回车

                  keepClosingSlash: true,//在单元素上保留末尾的斜杠

                  removeComments: true, //是否清除HTML注释  

                  removeRedundantAttributes: true,

                  removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)

                  removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  

                  minifyJS: false, //是否压缩页内JS  ,

                  minifyCSS: true //是否压缩页内CSS  

              },

              cache:true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true

             

             

          })],

  };