• webpack(2)webpack核心概念


    前言

      本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。接下来我们就会使用webpack来进行打包
     

    webpack的概念

    在开始前我们需要先理解一些核心概念:

    • 入口(entry)
    • 输出(output)
    • loader
    • 插件(plugin)
    • 模式(mode)
    • 浏览器兼容性(browser compatibility)
    • 环境(environment)
       

    入口(entry)

    入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

    默认值是 ./src/index.js,但你可以通过在 webpack.config.js 文件中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:

    module.exports = {
      entry: './path/to/my/entry/file.js',
    };
    

    单个入口(简写)语法

    entry 属性的单个入口语法,参考下面的简写:

    // webpack.config.js
    module.exports = {
      entry: {
        main: './path/to/my/entry/file.js',
      },
    };
    

    我们也可以将一个文件路径数组传递给 entry 属性,这将创建一个所谓的 "multi-main entry"。在你想要一次注入多个依赖文件,并且将它们的依赖关系绘制在一个 "chunk" 中时,这种方式就很有用。

    // webpack.config.js
    module.exports = {
      entry: ['./src/file_1.js', './src/file_2.js'],
      output: {
        filename: 'bundle.js',
      },
    };
    

    总结:当你希望通过一个入口为应用程序或工具快速设置 webpack 配置时,单一入口的语法方式是不错的选择。然而,使用这种语法方式来扩展或调整配置的灵活性不大
     

    对象语法

    module.exports = {
      entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js',
      },
    };
    

    对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。

    对象可以使用如下属性:

    • dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
    • filename: 指定要输出的文件名称。
    • import: 启动时需加载的模块。
    • library: 指定 library 选项,为当前 entry 构建一个 library
    • runtime: 运行时 chunk 的名字。如果设置了,就会创建一个以这个名字命名的运行时 chunk,否则将使用现有的入口作为运行时。
    • publicPath: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共 URL 地址。
    // webpack.config.js
    module.exports = {
      entry: {
        a2: 'dependingfile.js',
        b2: {
          dependOn: 'a2',
          import: './src/app.js',
        },
      },
    };
    

    输出(output)

    可以通过配置 output 选项,告知 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个 entry 起点,但只能指定一个 output 配置。
     

    用法

    webpack 配置中,output 属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为一个 output.filename

    module.exports = {
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
      },
    };
    

    此配置将一个单独的 bundle.js 文件输出到 dist 目录中。
     

    多个入口起点

    如果配置中创建出多于一个 "chunk"(例如,使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

    module.exports = {
      entry: {
        app: './src/app.js',
        search: './src/search.js',
      },
      output: {
        filename: '[name].js',
        path: __dirname + '/dist',
      },
    };
    
    // 写入到硬盘:./dist/app.js, ./dist/search.js
    

    loader

    什么是loader?

    • loaderwebpack中非常核心的一个概念
    • webpack用来做什么?
      • 在我们之前的实例中,我们主要是用webpack来处理js代码,并且webpack会自动处理js中的依赖
      • 但是,在开发中我们不仅仅有js代码要处理,我们也需要加载css、图片,也包括一些高级的将es6转成es5的代码,将Ts转成es5的代码,将scss、less转成css代码等等
      • 对于webpack本身的能力来说,对于这些转化是不支持的
      • 但是我们给webpack扩展对应的loader即可
    • loader的使用过程
      • 步骤一:通过npm安装对应使用的loader
      • 步骤二:在webpack.config.js中的modules关键字进行配置
    • 大部分loader我们都可以在官网中找到,并学习对应的用法
  • 相关阅读:
    【转】安装VS2008:this application has requested the run
    【转】开源史上的8大交易
    PowerDesigner属性设置笔记
    国外威客网站大盘点
    [Java]单项链表与双端链表[原]
    Jenkins学习总结(3)——Jenkins+Maven+Git搭建持续集成和自动化部署的
    Jenkins学习总结(2)——Jenkins+Maven进行Java项目持续集成
    Jenkins学习总结(2)——Jenkins+Maven进行Java项目持续集成
    创业公司如何实施敏捷开发
    创业公司如何实施敏捷开发
  • 原文地址:https://www.cnblogs.com/jiakecong/p/14989522.html
Copyright © 2020-2023  润新知