Webpack4 学习笔记六 多页面配置和devtool

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.js
    filename: '[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，可以使用此选项。