webpack3-loader和plugin的概念理解-CSDN博客

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

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

1、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
                  }
                }
              ]
            }
          ]
        },
复制代码

2、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/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

webpack3-loader和plugin的概念理解

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