webpack开发loader和plugins

现如今webpack作为前端不可或缺的打包工具之一，它具有非常强大的功能，也需要我们慢慢开发，实际中我们涉及到的基本如下：

• 配置项配置（loader、plugins）
• 开发属于自己需求的loader或者plugins

对于loader它其实更像是一个转换器，将我们拿到的资源经过我们特定的转换输出到外部使用，我们开发模板也比较简单，只是功能因项目而异：
下面我简单将拿到的资源中的border实线换成虚线，简易的，没有做过多匹配关系

test-loader/index.js:

// 引入这个包是为了我们拿到我们在loader配置时配置的options选项
// const loaderUitls = require('loader-utils')

module.exports = function(source) {
    // 获取webpack配置rules中的options以供使用
    // const options = loaderUitls.getOptions(this) || {}

    // console.log(source, '1234')
    // 将border类型由solid转换成dashed
    source = source.replace(/solid/, 'dashed')
    return source
}

webpack配置：

{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', resolve(__dirname, './loader/test-loader/index.js')],
      // include: [resolve(__dirname, './less')],
      exclude: /node_modules/,
},

简易plugins

const pluginName = 'ConsoleLogWebpackPlugin';
const zlib = require('zlib')
class ConsoleLogWebpackPlugin {
    constructor(options) {
        this.options = options
    }
    apply(compiler) {
        // 这里compiler上有许多广播出来的api，以下面为例
        compiler.hooks.emit.tap(pluginName, (compilation) => {
            // console.log('webpack 构建过程开始！', compilation.assets);
            // 通过compiler我们可以拿到对应的资源，可以进行对应的处理，例如压缩，去空格，去除打印等等
            for (var filename in compilation.assets) {
                // console.log(filename, 'name')
                if (/(.js)/.test(filename)) {
                    // console.log('123', compilation.assets[filename])
                    const gzipFile = zlib.gzipSync(compilation.assets[filename]._value, {
                        level: this.options.level || 7
                    })

                    compilation.assets[filename + '.gz'] = {
                        source: function() {
                            return gzipFile
                        },
                        size: function() {
                            return gzipFile.length
                        }
                    }
                }
            }
        });
        // compiler.plu
    }
}
module.exports = ConsoleLogWebpackPlugin;

webpack简单使用

const ConsoleLogWebpackPlugin = require('./plugins/consoleLog')
//插件数组里面添加
new ConsoleLogWebpackPlugin({
        level: 9
})

这里只为简单展示该如何去着手开发对应的plugins和loader，功能忽略，如有错误，还请包涵指出，谢谢