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彻底同样，却解决了扩展运算符报错的问题。

3、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来实现。

3、 webpack调试模式打包后.vue文件会被拍平到同一级目录：

如下devtool相关内容引自：https://webpack.docschina.org...

devtool

string false

选择一种 source map 格式来加强调试过程。不一样的值会明显影响到构建(build)和从新构建(rebuild)的速度。

T> webpack 仓库中包含一个 显示全部 devtool 变体效果的示例。这些例子或许会有助于你理解这些差别之处。

T> 你能够直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，由于它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，因此你最终将应用两次插件。

devtool	构建速度	从新构建速度	生产环境	品质(quality)
(none)	+++	+++	yes	打包后的代码
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map	o	++	no	原始源代码（仅限行）
eval-source-map	--	+	no	原始源代码
cheap-source-map	+	o	no	转换过的代码（仅限行）
cheap-module-source-map	o	-	no	原始源代码（仅限行）
inline-cheap-source-map	+	o	no	转换过的代码（仅限行）
inline-cheap-module-source-map	o	-	no	原始源代码（仅限行）
source-map	--	--	yes	原始源代码
inline-source-map	--	--	no	原始源代码
hidden-source-map	--	--	yes	原始源代码
nosources-source-map	--	--	yes	无源代码内容

T> +++ 很是快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，一般但愿更快速的 source map，须要添加到 bundle 中以增长体积为代价，可是对于生产环境，则但愿更精准的 source map，须要从 bundle 中分离并独立存在。

W> Chrome 中的 source map 有一些问题。咱们须要你的帮助！。

T> 查看 output.sourceMapFilename 自定义生成的 source map 的文件名。