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
原文地址:https://www.cnblogs.com/leona-d/p/10445276.html