美文网首页我爱编程
webpack基础搭建一

webpack基础搭建一

作者: iammei | 来源:发表于2018-04-18 11:56 被阅读0次

    版本:v3,配置项参考中文文档,任意webpack相关配置项均可直接输入搜索

    一个结合react的简单实例:点此处进入

    package.json

    npm init生成即可,详见node相关中的几篇小杂记。script内容如下:

    package.json


    webpack.config.js

    上图script中,build值为"webpack",会直接读取命名为webpack.config.js中的配置,若为其他命名则需对应到具体地址。

    webpack最简单的配置

    1.Entry(入口起点)

    @单入口起点

    用法:entry: string|Array(示例为单入口起点的对象语法,详见webpack中文文档入口起点

    @多入口起点

    见webpack基础搭建二

    备注:path的几个简单用法;变量__dirname可获取当前模块文件所在目录的完整绝对路径

    2.Output(输出)

    filename是用于输出文件的文件名,目标输出目录 path 的绝对路径。

    上图的配置结合entry及output的用法,可解释为,将项目入口为app/main.js的内容输出到build下命名为index.js(会自动创建)的文件中


    3.resolve(解析)

    详见中文文档resolve,此处仅介绍extensions:值为array类型

    注意:v3版本中,array中若第一个值展示空数组,需空格:[' ','.js','.jsx']

    extensions用法

    4. module(模块)

    选项决定了如何处理项目中的不同类型的模块中文文档

    此处仅介绍rules:

    值为array(一系列规则)

    每个规则可以分为三部分 - 条件(condition),结果(result)和嵌套规则(nested rule)。

    条件 结果

    5.loaders(加载器)

    用于对模块的源代码进行转换,中文文档Loaders。简单介绍如下,V3版本用法如示例中的module。

    loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!

    Loader有三种使用方式

    配置(推荐):在 webpack.config.js 文件中指定 loader(示例使用的方法)。

    内联:在每个 import 语句中显式指定 loader。

    内联loader

    CLI:在 shell 命令中指定它们。(此处不多介绍)

    babel-loader

    中文文档参考

    相关文章

      网友评论

        本文标题:webpack基础搭建一

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