zoukankan      html  css  js  c++  java
  • webpack-插件

    插件(Plugins)

    插件是 wepback 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!

    插件目的在于解决 loader 无法实现的其他事。

    剖析

    webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

    ConsoleLogOnBuildWebpackPlugin.js

    function ConsoleLogOnBuildWebpackPlugin() {
    
    };
    
    ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
      compiler.plugin('run', function(compiler, callback) {
        console.log("webpack 构建过程开始!!!");
    
        callback();
      });
    };
    作为一个聪明的 JavaScript 开发者,你可能还记得 Function.prototype.apply 方法。通过这个方法你可以把任意函数作为插件传递(this 将指向 compiler)。你可以在配置中使用这样的方式来内联自定义插件。

    用法

    由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。

    根据你的 webpack 用法,这里有多种方式使用插件。

    配置

    webpack.config.js

    const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
    const webpack = require('webpack'); //访问内置的插件
    const path = require('path');
    
    const config = {
      entry: './path/to/my/entry/file.js',
      output: {
        filename: 'my-first-webpack.bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
      module: {
        loaders: [
          {
            test: /.(js|jsx)$/,
            use: 'babel-loader'
          }
        ]
      },
      plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
      ]
    };
    
    module.exports = config;

    Node API

    即便使用 Node API,用户也应该在配置中传入 plugins 属性。compiler.apply 并不是推荐的使用方式。

    some-node-script.js

      const webpack = require('webpack'); //访问 webpack 运行时(runtime)
      const configuration = require('./webpack.config.js');
    
      let compiler = webpack(configuration);
      compiler.apply(new webpack.ProgressPlugin());
    
      compiler.run(function(err, stats) {
        // ...
      });
    你知道吗:以上看到的示例和 webpack 自身运行时(runtime) 极其类似。wepback 源码中隐藏有大量使用示例,你可以用在自己的配置和脚本中。
  • 相关阅读:
    今天是全面开发的第一天,特此纪念
    Linux 进程管理 (ZZ)
    骑车上班
    VSFTPD配置小结(一)
    Flash Builder 4 在Chrome的调试
    测试一下Windows Live Writer
    转:C++强大的背后
    转:Flex中的Image屬性 (width, contentWidth, content.width)的差異
    Flash Builder 4 安装提示“安装程序检测到计算机重新启动操作可能处于挂起状态“的解决
    使用简单工厂和State模式替换冗余的 switchcase 语句
  • 原文地址:https://www.cnblogs.com/cisum/p/8475438.html
Copyright © 2011-2022 走看看