webpack 插件你会使用哪几种？

​

背景

最近在看一些webpack插件相关的东西，本身对webpack不是很了解，但是这些事高级程序员必备要掌握的知识，试着学一学。

介绍

webpack官网：https://www.webpackjs.com/concepts/plugins/
官网有这么多东西：

官网内容

 

• 概念：就是一个打包器，把我们写的东西，打包成浏览器能够识别的东西，并且精简，压缩等（自己总结的）；

• 入口起点（entry）：指定一个文件路径，那么webpack 就从这儿开始干活（打包，编译，压缩等）；

• 输出(output)：webpack工作完会输出到指定的位置；

• loader ：loader 用于对模块的源代码进行转换，因为webpack 本身只能打包commonjs规范的js文件，可以理解成处理代码的，比如说less如何最终处理成css，就需要loader来处理。

• 插件（plugins）：理解成对项目和webpack的扩展吧，比如开发中，热替换（下面也有），就是插件。比如DllPulgin(加快打包速度的，分离打包)等。用于辅助开发，扩展webpack的功能的。

• 配置（configuration）：webpack.js文件的配置内容，可以配置那些功能

• 模块（modules）：webpack可以支持的模块有ts,sass,less,coffeeScript，ESNext。

• manifest ：当webpack打包时，我们的src等路径全都不存在了，那么打包时如何找到路径呢？就是通过mainfest.json文件来找到对应的路径，找到依赖。

• 构建目标（target）：用来指定webpack使用什么环境的语言来构建，比如：

 

module.exports = {
  target: 'node'
};

使用 node webpack 会编译为用于「类 Node.js」环境。如果需要了解支持哪些target,请参考如下链接：
https://www.webpackjs.com/configuration/target/

• 模块热替换(HMR - Hot Module Replacement)：就是开发中实时编译功能，本地写好的代码，不用手动刷新，页面会通过保存自动刷新。

常用的插件

DefinePlugin ：允许在编译时(compile time)配置的全局常量

用法：

webpack.config.js文件（所有插件都需要用new的方式来创建）：

 

//创建：
 new webpack.DefinePlugin({
            "test":{a:1}
}),

app.js ：

 

//使用：
console.log(test);//这儿不需要引入就可以直接使用

---

DllPlugin：为了极大减少构建时间，进行分离打包

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

下面的例子，将我们常用的jquery、lodash打包，这两个库也不会经常去改变，单独打包，后续打包就不用在打包这两个静态资源的文件了，只打包我们src下面的文件，从而加快了打包速度。

webpack.dll.js

 

const webpack=require('webpack');
module.exports = {
    entry:{
        vendor:['jquery','loadsh']
    },
    output:{
        path:__dirname+"/dll",
        filename:"[name].js",
        library:"[name]_library"
    },
    plugins:[
        new webpack.DllPlugin({
            path:__dirname+"/dll/[name]-mainfest.json",
            name:"[name]_library",
            context:__dirname
        })
    ]
}

编译如上代码会在目录中生成如下文件：

 

dll目录

webpack.config.js

 

const webpack=require('webpack');
module.exports = {
    entry:{
        app:'./app.js'
    },
    output:{
        filename:"[name].js"
    },
    plugins:[
        new webpack.DefinePlugin({
            "test":{a:1}
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./dll//vendor-mainfest.json"),
            // name: "./my-dll.js",
            // scope: "xyz",
            // sourceType: "commonjs2"
          })
        // new webpack.ProvidePlugin({
        //     $:'jquery'
        // })
    ]
}

vendor-mainfes

 

vendor-mainfes文件里面是一串json，都是一些路径的地址。

---

EnvironmentPlugin：DefinePlugin 中 process.env 键的简写方式。

EnvironmentPlugin 是一个通过 DefinePlugin 来设置 process.env 环境变量的快捷方式。

 

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG'])

等价于

 

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
})

---

ExtractTextWebpackPlugin：从 bundle 中提取文本（CSS）到单独的文件

安装

 

npm install --save-dev extract-text-webpack-plugin
# 对于 webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# 对于 webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

用法：

 

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

---

HotModuleReplacementPlugin：启用模块热替换(Enable Hot Module Replacement - HMR)

 

new webpack.HotModuleReplacementPlugin({
  // Options...
})//只要加上这么一句就好了

---

HtmlWebpackPlugin：简单创建 HTML 文件，用于服务器访问

需要安装

 

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

该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。只需添加插件到你的 webpack 配置如下：

 

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

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]//这儿添加
};

这将会产生一个包含以下内容的文件 dist/index.html：

 

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

---

ProvidePlugin：不必通过 import/require 使用模块

自动加载模块，而不必到处 import 或 require 。

webpack.config.js

 

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
or
new webpack.ProvidePlugin({
  identifier: ['module1', 'property1'],
  // ...
})

然后在我们任意源码中：

 

// in a module
$('#item'); // <= 起作用
jQuery('#item'); // <= 起作用
// $ 自动被设置为 "jquery" 输出的内容