1.使用npm init初始化项目

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。

npm init -y 其中“-y”是“yes”的意思在init的时候省去了敲回车的步骤,生成的默认的package.json

2.配置webpack.config.js

1. 在我们项目的根目录下创建一个webpack.config.js的文件
2. 输入相关配置https://webpack.js.org/concepts/#entry

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',//这个是项目的主要js文件地址
output: {
path: path.resolve(__dirname, 'dist'),//"dist"是打包后文件需要保存的地址
filename: 'my-first-webpack.bundle.js',//这个是项目的打包后的文件名
},
};

3.运行打包程序

在控制台中输入：“webpack”即可运行打包程序

如果在pakeage.json文件中增加一行这个代码：

{
  "name": "02-vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"//执行“npm run build”等价于“webpack”
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

那么在控制台打包时我们使用“npm run build”的效果是和输入webpack”的效果是一样的

4.注意踩坑点位

• Js代码输入导出导入代码输入错误，会引起错误
• webpack.config.js文件配置的问题
• 文件初始化的位置