webpack3-loader和plugin的概念理解

对于loader，它就是一个转换器，将A文件进行编译造成B文件，这里操做的是文件，好比将A.scss或A.less转变为B.css，单纯的文件转换过程；

对于plugin，它就是一个扩展器，它丰富了wepack自己，针对是loader结束后，webpack打包的整个过程，它并不直接操做文件，而是基于事件机制工做，会监听webpack打包过程当中的某些节点，执行普遍的任务。

一、loader

  Loader是webpack最重要的功能之一。Loader让webpack可以处理不一样的文件。loader能够将全部类型的文件转换为webpack可以处理的有效模块，而后利用webpack的打包能力，对他们进行处理。本质上，webpack loader将全部类型的文件，转换为应用程序的依赖图能够直接引用的模块。
  例如，

loader能够将sass，less文件的写法转换成css，而不在使用其余转换工具。
能够将ES6或者ES7的代码，转换成大多数浏览器兼容的JS代码。
能够将React中的JSX转换成JavaScript代码。

即，在webpack中Loader有两个目标：

识别出应该被对应的loader进行转换的文件。（使用test属性）
转换这些文件，从而使其可以被添加到依赖图中（并最终添加到bundle中）。（使用use属性）

用法：
  Loader须要单独安装，须要什么Loader就使用npm安装便可。并对应webpack.config.js中的module属性：

module:{
    rules: [{
        test: 
        use: 
        include/exclude:
        query: 
    }]
}

test：用于匹配处理文件的扩展名的表达式，必须
use：loader名称，就是要使用的模块名，必须
include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不须要处理的文件（文件夹），可选
query：为loader提供额外的设置选项，可选

其中，use有三种写法：

（1）直接用use：

use:['style-loader','css-loader']

（2） 将use换成loader：

loader:['style-loader','css-loader']

（3）使用use + loader：

use: [{
             loader: "style-loader"
           }, {
             loader: "css-loader",
             options:{}
          }]

例如:

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },
            {
              test: /\.css$/,
              use: [
                { loader: 'style-loader' },
                {
                  loader: 'css-loader',
                  options: {
                    modules: true
                  }
                }
              ]
            }
          ]
        },

二、plugins

  loader被用于转换某些类型的模块，而插件则能够用于执行普遍的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。
  想要使用一个插件，你只须要 require()它，而后将它添加到plugins数组中。多数插件能够经过选项自定义。你也能够在一个配置中由于不一样目的而屡次使用同一个插件，这时须要经过使用new操做符来建立它的一个实例。
剖析：
  webpack插件是一个具备 apply 属性的JavaScript对象。apply属性会被webpack compiler调用，而且compiler对象可在整个编译周期访问。
用法：
  因为插件能够携带参数/选项，你必须在webpack配置中，想plugins属性传入 new 实例。
例如:

// webpack.config.js文件头部引入插件
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');

// 插件配置
plugins:[
    new uglify()，
    new htmlPlugin({
          minify:{
            removeAttributeQuotes: true
          },
          hash: true,
          template: './src/index.html'
        }),
  ],

（1）JS 压缩
  在webpack中JS压缩使用的是 uglifyjs-webpack-plugin插件。

const uglify = require('uglifyjs-webpack-plugin');

plugins: [
    new uglify();
]

注意： 在开发环境中使用该插件会报错，由于在开发预览时须要明确报错行数和错误信息，因此不须要对JS压缩，而生产环境中才会对JS压缩。devServer用于开发环境，而压缩JS用于生产环境，在开发中作生产环境的事情，因此会报错。

（2）打包HTML
  要将 HTML 文件从 src 目录下打包到 dist 目录下，须要借助 html-webpack-plugin 插件。该插件须要安装。

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

配置：

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

plugins: [
    new htmlPlugin({
        minify: {
            removeAttributeQuotes: true
        },
        hash: true,
        template: './src/index.html'
    })
]

minify：是对HTML文件进行压缩，removeAttributeQuotes是去除属性的双引号。
hash：为了不缓存js，加入 hash
template：是要打包的HTML模板路径和文件名称。

---

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

前端最火框架排行榜——小程序二维码