webpack 多页配置

webpack可以配置单页应用, 也可以配置多页应用。

区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个

webpack配置:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: "development",entry: {home: './src/home.index',about: './src/about.js'},output: {// 多个入口的文件不能打包的一个文件中, 应该用name区别。这样就会输出 home.js和about.jsfilename: '[name].js',path: path.resolve(__dirname, 'dist')},plugins: [new HtmlWebpackPlugin({title: 'page home',template: './index.html', // 模版文件filename: 'index.html',chunks: ['home']}),new HtmlWebpackPlugin({title: 'page about',template: './index.html', // 模版文件filename: 'index.html',chunks: ['about']})]
}

以上代码, HtmlWebpackPlugin 实例话了两次, 每次都会生成一个html,所谓的多页。并且选项中的, chunks的设置主要让每个index.html分别引用它自己的js文件。

webpack devtool

此选项控制是否生成，以及如何生成 source map。

source-map

源码映射, 会单独生成一个sourcemap文件, 出错了,会标识当前报错的列和行, 大而全,并且是相互独立的。
source-map 是所有选项中最慢和最高质量的选择，但这对于生产建设来说是很好的

eval-source-map

不会产生单独的文件, 但是可以显示列和行。和source-map的主要区别是不会产生文件

cheap-module-source-map

简化后的 source-map, 不会产生列, 但是是一个单独的map文件,产生后你可以保留起来,用于调试

cheap-module-eval-source-map

不会生成map文件,不会显示列,可以定位到错误的行

webpack配置

module.exports = {devtool: "source-map"
}

总结:

开发环境推荐使用：

• eval ：每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是，它没有正确显示行号，因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。

• eval-source-map：每个模块使用eval()执行，而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的，但是它提供快速的重建速度和产生真实的文件。行号被正确映射，因为它被映射到原始代码。它产生了最优质的开发资源。

• cheap-eval-source-map：与eval-source-map类似，每个模块都使用eval()执行。它没有列映射，它只映射行号。它忽略了来自加载器的源代码，并且只显示与eval devtool相似的经过转换的代码。

• cheap-module-eval-source-map：类似于cheap-eval-source-map，在本例中，来自加载器的源映射被处理以获得更好的结果。然而，加载器源映射被简化为每一行的单个映射。

生产环境推荐使用

• (none) ：(省略devtool选项)-不触发SourceMap。这是一个很好的选择。

• source-map：一个完整的SourceMap是作为一个单独的文件。它为bundle 添加了引用注释，因此开发工具知道在哪里找到它。

• hidden-source-map：与source-map相同，但不向bundle 添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪，但不想为浏览器开发工具暴露您的SourceMap，可以使用此选项。

参考文章: webpack之devtool

笔记地址