• Webpack基础入门学习笔记


    # Webpack Project Build
    1.创建一个项目目录文件夹
      如:D:/demo

    2.打开demo文件夹,按住Shift + 鼠标右键,选择【在此处打开命令窗口】

    3.初始化npm,生成package.json文件
      npm init -y
      这是为了便于日后项目包的管理及发布,详情请查阅https://docs.npmjs.com

    4.安装 webpack
    【安装最新版本】
      npm install --save-dev webpack
    【安装特定版本】
      npm install --save-dev webpack@<version>

    5.安装 webpack 4+ 版本
      npm install --save-dev webpack-cli

    6.创建webpack.config.js文件
      配置请参考官方文档:
      https://www.webpackjs.com/configuration/#%E9%80%89%E9%A1%B9

    7.编辑package.json文件
      将:
      "main": "index.js"
      替换为:
      "private": true
      这一步官网介绍是为了确保我们安装包是私有的(private),移除 main 入口,可以防止意外发布你的代码。

    常见项说明:
    --name:项目名称。(默认: 当前目录名称)
    --version:项目版本。(默认: 1.0.0)
    --description:项目描述。(默认: 来自README的信息 || "")
    --keywords:项目关键词。
    --homepage:项目官网地址。
    --license:项目许可证。
    --author:项目作者。
    --contributors:项目贡献者。
    --files:值为数组类型,
        a.为执行"npm pack"时需要包含的文件
        b.需为根目录文件(其可以是文件名或文件夹名,当为文件夹名时将包含其下的所有子文件及子文件夹)
        c.默认为["*"],包含所有文件(当使用默认值时,可在根目录创建".npmignore"文件来指定排除哪些文件,语法与".gitignore"类似)
    --main:程序的主要入口点,当另一个应用程序需要您的模块时将加载的文件的名称。(默认: index.js)
    --repository:项目代码存放地址,对想要为你的项目贡献代码的人有帮助
          eg: { "type" : "git", "url" : "https://github.com/npm/cli.git"}
    --config:项目配置{\尚有疑问\}
        eg:"config" : { "port" : "8080" }
        a.可通过"process.env.npm_package_config_port"来调用
        b.可通过"npm config set foo:port 8001"来修改其配置
    --dependencies:您的应用程序在生产中所需的包。
    --devDependencies:仅为本地开发和测试所需的包。
    --private:当为"true"时npm将不允许您发布该项目

    --scripts:值为对象类型,指定了项目的生命周期个各个环节需要执行的命令(默认: 一个空test脚本)
    ——prepublish:在打包并发布包之前运行,以及在没有任何参数的本地npm安装之前运行
    ——prepare:在打包和发布包之前运行,在没有任何参数的本地"npm install"上运行,以及安装git依赖项时。这是在preublish之后运行,但是在preublishOnly之前运行
    ——prepublishOnly:在包准备和打包之前运行,仅限于npm发布
    ——prepack:在打包tarball之前运行(在"npm pack","npm publish",以及安装git依赖项时
    ——postpack:在生成tarball之后运行并移动到其最终目标
    ——publish,postpublish:在包发布后运行
    ——preinstall:在安装软件包之前运行
    ——install,postinstall:安装包后运行
    ——preuninstall,uninstall:在卸载软件包之前运行
    ——postuninstall:在卸载软件包之后运行
    ——pretest, test, posttest:由"npm test"命令运行
    ——prestop, stop, poststop:由"npm stop"命令运行
    ——prestart, start, poststart:由"npm start"命令运行
    ——prerestart, restart, postrestart:由"npm restart"命令运行
    ——preshrinkwrap, shrinkwrap, postshrinkwrap:由"npm shrinkwrap"命令运行
    另外,也可以通过"npm run <stage>"来运行指定的脚本。当前除了上述这些生命周期以外,你也可以自定义一些可以通过"npm run"来执行的脚本指令
    eg:"scripts": { "dev":"node app.js" }
    执行cli命令:"npm run dev" 就可以运行 "node app.js"

    详情请参考官方文档:https://docs.npmjs.com/misc/scripts

    详细package.json文件配置请参考官方文档:
    https://docs.npmjs.com/files/package.json.html

    在博客园也发现一个很好的非常详情的中文翻译版:
    https://www.cnblogs.com/tzyy/p/5193811.html#_h1_9
  • 相关阅读:
    【CF1528D】It's a bird! No, it's a plane! No, it's AaParsa!
    【CF1528C】Trees of Tranquillity
    【CF1528B】Kavi on Pairing Duty
    【洛谷P5443】桥梁
    【CF gym102759I】Query On A Tree 17
    ansible-playbook批量修改密码
    kubernetes集群简单实例搭建
    UiPath屏幕抓取Screen Scraping的介绍和使用
    学习廖雪峰的Git教程3--从远程库克隆以及分支管理
    学习廖雪峰的Git教程2--远程仓库
  • 原文地址:https://www.cnblogs.com/leona-d/p/10445276.html
Copyright © 2020-2023  润新知