一、webpack打包es6语法报错，如...扩展运算符不识别：
【方法一】在在babel-loader中添加presets可以解决问题，代码如下：
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['stage-3']
},
exclude: /(node_modules)/
},以上方式确实可以解决报错问题，但有的情况下并不好用，无论添加多少preset。被整到绝望。。。
【方法二】创建 .babelrc 内容如下：
{
"presets": ["stage-3"]
}【方法二】跟【方法一】使用的preset完全一样，却解决了扩展运算符报错的问题。
三、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来实现。
三、 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 的文件名。