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