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 的文件名。