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