今天我学会webpack了吗？ --【基础篇 1】初始化初始化新建一个文件夹，执行 npm init 执行之后，项目里

初始化

新建一个文件夹，执行 npm init

执行之后，项目里多了一个 package.json 文件，长这样：

{
  "name": "01-init",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装 webpack，执行 npm i -D webpack

安装后，文件目录多了 node_modules 和 package-lock.json

因为我们要使用 webpack 命令行，所以还需要安装命令行接口 webpack-cli。

执行 npm i -D webpack-cli

尝试打包一个文件

新建 src/index.js，在里面随便写个console

console.log("this is index.js");

在 package.json 里面配置打包命令

  "scripts": {
    "build": "webpack"
  },

执行 npm run build 后，生成了一个 dist 文件夹，说明打包成功。

如果想打包一个别的文件呢？

在 src 里面再建一个 test.js，然后在 pageage.json 里面把 build 命令改为：

  "scripts": {
    "build": "webpack ./src/test.js"
  },

这样打包出来的dist/main.js 里面就是 test文件的内容了

注释区

关于 npm i -D

npm i -D 相当于 npm i --save-dev

会把依赖包名称添加到package.json里的 devDependencies 目录下，devDependencies里的包是开发阶段使用的，代码上线后不需要，比如 webpack 等打包工具。

npm i -S 相当于 npm i --save

会把依赖包名称添加到package.json 里的 dependencies目录下，dependencies里的包是在生产环境需要的，比如 react 等。