Webpack入门六：插件(Plugins)及hash comments: true

插件(Plugins)是用来拓展 webpack 功能的, 用于完成一些 loader 不能完成的工作。

Loaders 和 Plugins 常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders 是在打包构建过程中用来处理源文件的(JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

webpack 有很多内置的插件，本篇主要介绍 webpack 的内置插件 BannerPlugin 和第三方插件HtmlWebpackPlugin

一、BannerPlugin

先安装 webpack 插件

$ npm i webpack -D
// 注意 `webpack4.0` 以后，将命令行工具分离出来 `webpack-cli`, 
// 本篇依赖的版本是 `3.11`, 指定 `webpack` 的版本命令如下
$ npm i webpack@3.11.0

在 webpack.config.js 中添加 plugins

const webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'app.js'
  },
  module: {
    rules: [
      { test: /\.css$/, 
        use: ['style-loader', 'css-loader?minimize'],
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究')
  ],
}

执行 webpack 命令，打包后的 js 文件如下

本实例源码

二、html-webpack-plugin

这是个第三方插件，需要安装，这个插件的作用是依据一个简单的 index.html 模板，生成一个自动引用你打包后的 JS 文件的新 index.html。这在每次生成的 js 文件名称不同时非常有用（比如添加了 hash值）。

先安装插件

$ npm i html-webpack-plugin -D

删除 index.html 模板中的 script 脚本引用，配置 webpack.config.js 如下：

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

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname + '/dist', // 将输出放到dist文件夹
    filename: 'app-[hash].js'
  },
  module: {
    rules: [
      { test: /\.css$/, 
        use: ['style-loader', 'css-loader?minimize'],
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
            template: __dirname + "/index.html"
        })
  ],
}

最后执行 webpack 命令，会生成 dist 文件夹下 app.js 和 index.html, 在 index.html 会发现多出了 script 引入的 javascript 文件本实例源码

三、 extract-text-webpack-plugin

在上一篇中通过 Loader 加载了 CSS 文件，本节将通过 Plugin 把注入到 app.js 文件里的 CSS 提取到单独的文件中，配置修改如下：

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

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname + '/dist', // 将输出放到dist文件夹
    filename: 'app-[hash].js'
  },
  module: {
    rules: [
      { test: /\.css$/, 
        use: ExtractTextPlugin.extract({
          use: ['css-loader'], // 转换 .css 文件需要使用的 Loader
        }),
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
            template: __dirname + "/index.html" //new 一个这个插件的实例，并传入相关的参数
        }),
    new ExtractTextPlugin({
      filename: `[name]_[contenthash:8].css` // 从 .js 文件中提取出来的 .css 文件的名称
    }),
  ],
}

安装插件

$ npm i extract-text-webpack-plugin -D

最后执行 webpack 后，会在 dist 下生成 main_[hash].css, 并且 index.html 多出了一行：

<link href="main_2729b3b7.css" rel="stylesheet">

最后在浏览器打开试试，跟前面的效果是一样的。

$ cd ./dist
$ http-server

本实例源码

felix-cao / Blog