美文网首页
Webpack4-配置

Webpack4-配置

作者: 16325 | 来源:发表于2020-03-08 01:54 被阅读0次

    module.rule.parser

    解析选项对象。所有应用的解析选项都将合并。

    解析器(parser)可以查阅这些选项,并相应地禁用或重新配置。大多数默认插件,会如下解释值:

    将选项设置为 false,将禁用解析器。
    将选项设置为 true,或不修改将其保留为 undefined,可以启用解析器。
    然而,一些解析器(parser)插件可能不光只接收一个布尔值。例如,内部的 NodeStuffPlugin 差距,可以接收一个对象,而不是 true,来为特定的规则添加额外的选项。

    示例(默认的插件解析器选项):

    parser: {
      amd: false, // 禁用 AMD
      commonjs: false, // 禁用 CommonJS
      system: false, // 禁用 SystemJS
      harmony: false, // 禁用 ES2015 Harmony import/export
      requireInclude: false, // 禁用 require.include
      requireEnsure: false, // 禁用 require.ensure
      requireContext: false, // 禁用 require.context
      browserify: false, // 禁用特殊处理的 browserify bundle
      requireJs: false, // 禁用 requirejs.*
      node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main 等。
      node: {...} // 在模块级别(module level)上重新配置 [node](/configuration/node) 层(layer)
    }
    

    resolve.alias

    创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:

    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
    

    webpack-dev-server

    devServer: {
      contentBase: path.join(__dirname, "dist"),
      compress: true,
      port: 9000
    }
    
    • devServer.after
    • devServer.before
    after(app){
      // do fancy stuff
    }
    
    • devServer.headers
    headers: {
      "X-Custom-Foo": "bar"
    }
    
    • devServer.hot
      启用 webpack 的模块热替换特性:
    hot: true
    

    devServer.proxy

    如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。

    dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法,请查阅其文档

    localhost:3000 上有后端服务的话,你可以这样启用代理:

    proxy: {
      "/api": "http://localhost:3000"
    }
    
    

    请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users

    如果你不想始终传递 /api ,则需要重写路径:

    proxy: {
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
      }
    }
    
    

    默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,修改配置如下:

    proxy: {
      "/api": {
        target: "https://other-server.example.com",
        secure: false
      }
    }
    
    

    有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

    在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径,来跳过代理请求。

    例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。你可以这样做:

    proxy: {
      "/api": {
        target: "http://localhost:3000",
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        }
      }
    }
    
    

    If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a context property:

    proxy: [{
      context: ["/auth", "/api"],
      target: "http://localhost:3000",
    }]
    

    Devtool

    此选项控制是否生成,以及如何生成 source map。
    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 无源代码内容

    对于开发环境

    以下选项非常适合开发环境:

    eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。

    eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

    cheap-eval-source-map - 类似 eval-source-map,每个模块使用 eval() 执行。这是 "cheap(低开销)" 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像 eval devtool。

    cheap-module-eval-source-map - 类似 cheap-eval-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

    对于生产环境

    这些选项通常用于生产环境中:

    (none)(省略 devtool 选项) - 不生成 source map。这是一个不错的选择。

    source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。

    你应该将你的服务器配置为,不允许普通用户访问 source map 文件!

    hidden-source-map - 与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

    你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。

    nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

    这仍然会暴露反编译后的文件名和结构,但它不会暴露原始代码。

    在使用 uglifyjs-webpack-plugin 时,你必须提供 sourceMap:true 选项来启用 source map 支持。

    Watch 和 WatchOptions

    webpack 可以监听文件变化,当它们修改后会重新编译。

    webpack --watch --progress
    

    Externals

    externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反,所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。此功能通常对 library 开发人员来说是最有用的,然而也会有各种各样的应用程序用到它。

    防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)

    例如,从 CDN 引入 jQuery,而不是把它打包:

    index.html

    <script
      src="https://code.jquery.com/jquery-3.1.0.js"
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
      crossorigin="anonymous">
    </script>
    
    

    webpack.config.js

    externals: {
      jquery: 'jQuery'
    }
    

    这样就剥离了那些不需要改动的依赖模块,换句话,下面展示的代码还可以正常运行:

    import $ from 'jquery';
    $('.my-element').animate(...);
    

    列子:

    externals : {
      lodash : {
        commonjs: "lodash",
        amd: "lodash",
        root: "_" // 指向全局变量
      }
    }
    externals : {
      subtract : {
        root: ["math", "subtract"]
      }
    }
    

    此语法用于描述外部 library 所有可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问,但在全局变量形式下用 _ 访问。subtract 可以通过全局 math 对象下的属性 subtract 访问(例如 window['math']['subtract'])。

    相关文章

      网友评论

          本文标题:Webpack4-配置

          本文链接:https://www.haomeiwen.com/subject/bkeldhtx.html