webpack使用踩坑汇总

1. webpack打包es6语法报错，如...扩展运算符不识别：

【方法一】在在babel-loader中添加presets可以解决问题，代码如下：

{
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
           presets: ['stage-3']
        },
        exclude: /(node_modules)/
      },

以上方式确实可以解决报错问题，但有的情况下并不好用，无论添加多少preset。被整到绝望。。。

【方法二】创建 .babelrc 内容如下：

{
    "presets": ["stage-3"]
}

【方法二】跟【方法一】使用的preset完全一样，却解决了扩展运算符报错的问题。

2. webpack3与webpack4编写插件实例：

【webpack3 实例】

const pluginName = 'MyHtmlPlugin';
function MyHtmlPlugin (options) {
    this.options = options;
}
MyHtmlPlugin.prototype.apply = function(compiler) {
    let options = this.options;
    compiler.plugin('compilation', function(compilation) {
        compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
            htmlPluginData.html += 'Hello world';
            callback(null, htmlPluginData);
        });
    })
};
module.exports = MyHtmlPlugin;

【webpack4 实例一】

const pluginName = 'MyHtmlPlugin';
function MyHtmlPlugin (options) {
    this.options = options;
}
MyHtmlPlugin.prototype.apply = function(compiler) {
    let options = this.options;
    compiler.plugin('compilation', function(compilation) {
        compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(pluginName, (htmlPluginData, callback) => {
            htmlPluginData.html += 'Hello world';
            callback(null, htmlPluginData);
        });
    })
};
module.exports = MyHtmlPlugin;

【webpack4 实例二】:

const pluginName = 'MyHtmlPlugin';
function MyHtmlPlugin (options) {
    this.options = options;
}
MyHtmlPlugin.prototype.apply = function(compiler) {
    let options = this.options;
    compiler.plugin('compilation', function(compilation) {
        compilation.plugin('html-webpack-plugin-before-html-processing', async function(htmlPluginData, callback) {
            return new Promise((resolve, reject) => {
                htmlPluginData.html += 'Hello world';
                resolve(htmlPluginData);
            })
        });
    })
};
module.exports = MyHtmlPlugin;

如上：上面的 function的callback在webpack4中是不存在的，’html-webpack-plugin-before-html-processing‘ 是方法是一个异步方法，所以要么选择使用【webpack4 实例一】的方式，要么使用 async使用 Promise来实现。