webpack入门到进阶（六) - Plugins

 本篇文章，介绍几个在webpack常用的插件安装使用。

html-webpack-plugin

这个插件的作用，应该大家都很熟悉，将以一个index.html为模板打包成dist目录下一个index.html文件。

可以帮助我们处理页面里面的注释删除，空格符删除等功能，节省项目大小。

安装：

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

 用法：在webpack.config.js引入；

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

 配置plugin选项：

  plugins: [
    new HtmlWebpackPlugin({
    minify: { // 压缩HTML文件
      removeComments: true, // 移除HTML中的注释
      collapseWhitespace: true, // 删除空白符与换行符
      minifyCSS: true// 压缩内联css
    },
    filename: 'index.html',
    template: 'index.html'
  })],

CopyWebpackPlugin

这个插件的作用是：将单个文件或整个目录复制到构建目录。我们可以通过这个插件将项目中的静态资源文件，直接拷贝到打包生成的dist目录下。

这样做有什么好处呢，原因在于，因为我们在前端项目里常常会通过相对路径形式引入文件图片，在开发阶段图片能够正常显示。

<img src="../image/logo.png"/>

然而我们执行打包npm run build后，就会在项目中发现，并不能找到这个路径下的图片。因为，打包后项目根路径下，就不存在src文件夹。

所以，不要使用这种相对路径寻找到图片，而是根路径。我们在项目的根目录新建一个assets文件夹里面存入我们想要使用的资源。

然后在项目里通过以下方式引入对应资源，此后使用copy-webpack-plugin插件。

<img src="/assets/image/logo.png"/>

安装命令：

npm install --save-dev copy-webpack-plugin

 继续配置我们的webpack.config.js文件

var CopyWebpackPlugin = require('copy-webpack-plugin');

 

  plugins: [
    new HtmlWebpackPlugin({
    minify: { // 压缩HTML文件
      removeComments: true, // 移除HTML中的注释
      collapseWhitespace: true, // 删除空白符与换行符
      minifyCSS: true// 压缩内联css
    },
    filename: 'index.html',
    template: 'index.html'
  }),
  new CopyWebpackPlugin([
    { 
     from: __dirname + '/assets',//打包根目录下的assets文件
     to: './assets' //打包dist目录的assets文件
    },
  ])],

BannerPlugin

关于bannerPlugin的使用，这个插件是webpack自己带有的，我们就不需要重新安装了。（所以需要先在webpack.config.js文件先引入webpack）

其实，在项目中，我们就是做一些声明。比如什么版权所有，啥之类的。

用法：

plugins: [
    new HtmlWebpackPlugin({
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      filename: 'index.html',
      template: 'index.html'
    }),
    new CopyWebpackPlugin([
      {
        from: __dirname + '/assets',
        to: './assets'
      },
    ]),
    new webpack.BannerPlugin({
      banner: "我写的博客好好看,版权我有,违法必究"
    })
  ],

插件有很多，我就不一一介绍了。具体可以查看官方提供的文档：

https://www.webpackjs.com/plugins/banner-plugin/

到现在为止：webpack入门基础我就介绍到这里了。坚持写webpack入门到进阶这一模块的初衷就是彻底的熟悉webpack基础使用，原理，将前端模块化，工程化进行到底。优化我们开发的项目内容。

关于soureMap的使用，我觉得，我可以把它放在进阶里面。哈哈。未完待续！！！接下来会很精彩。