Webpack学习：plugin

1.plugin和loader的区别

loader:

webpack只能理解JavaScript和JSON文件。loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

思考如下webpack.config.js配置:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

它告诉webpack编译器在打包过程中，碰到「在 require()/import语句中被解析为’.txt'的路径」时，在对它打包之前，先使用raw-loader转换一下。”

plugin

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

思考如下webpack.config.js配置:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: []
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

它告诉webpack编译器在打包过程中需要使用到plugin，而什么时候使用什么plugin，则根据plugin的具体实现而定

总结： loader用于对模块源码的转换，定义webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。而plugin可以解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

2.使用

以HtmlWebpackPlugin为例，当我们只使用loader打包时，打包出的文件夹（假设为输出路径名为dist）里并不含有html文件，必须手动复制到dist文件夹下，并且手动更改引入的js文件为打包生成的js文件。而HtmlWebpackPlugin可以自动处理这个问题：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

执行打包后就会在dist目录下生成index.html：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

如果希望使用src下自己的index.html，可以配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({  
      filename: 'bundle.html',//自定义输出html的名字
      template: 'src/index.html'//以自己的html文件为模板    
  })]
};

该配置代表，生成之后的文件名为bundle.html，它的内容等于在src/index.html文件中自动插入的结果往往一个插件的配置项有很多，可以在其官方地址查看，HtmlWebpackPlugin的options文档地址为：https://github.com/jantimon/html-webpack-plugin#options

这里列举了很多webpack官方推荐的plugin，常用的除了上面的html-webpack-plugin，还有：

clean-webpack-plugin：每次构建前清理/dist文件夹，防止新旧打包生成的代码混合
webpack.HotModuleReplacementPlugin：webpack自带，热替换插件
uglifyjs-webpack-plugin：js代码压缩
optimize-css-assets-webpack-plugin：CSS压缩优化
mini-css-extract-plugin：将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件

文章目录

1.plugin和loader的区别

loader:

plugin

2.使用