1. 生成package.json文件
需要使用到package.json
通过npm init 生成
- 终端进入到对应文件夹，执行npm init
- package name: (02-配置) meetwebpack （直接敲回车默认使用括号内的名字，但有中文不支持）
… 省略部分皆直接回车 - entry point: (webpack.config.js) index.js (没必要用webpack.config.js做入口文件，暂时随便写一个，目前用不上）
1.1 package.json 文件内容
项目需要单独依赖node环境时需要，告诉我们当前项目的一些信息
{"name": "meetwebpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC" // 开源时需要，不开源不需要，可删除
}
1.2 npm install
当webpack.json中还有一些依赖的东西时，需要在终端执行 npm install
生成一个 package-lock.json
2. 创建webpack.config.js文件，映射出入口
原先打包时要执行 webpack ./src/main.js ./dist/bundle.js ，命令太长
现在要执行 webpack 实现上述功能
-
在 02-配置 文件夹下创建 webpack.config.js
（暂时只能使用这个名字） -
通过CommonJs导出一个对象
module.exports = {}
- 对象内容包含： 对应的入口及出口
module.exports = {entry: '',output:
}
执行 webpack时，会自动找到 webpack.config.js , 找导入口和导出口，有就读取入口和出口
//1.导入模块path
//注意不是 './path'； 会去node对应的包里找path （npm init）
const path = require('path') module.exports = {entry: './src/main.js',output: {// 这里的绝对路径path 需要动态获取,需要用到node里面的语法// 1. 导入模块path// 2. 拼接路径：使用resolve函数； __dirname是node上下文的全局变量，存放当前文件(webpack.config.js)所在的路径path: path.resolve(__dirname,'dist'),filename: 'bundle.js'}
}
此时，再执行webpack即可完成打包
3. 再做一层映射，使用npm run build命令 取代webpack命令
在package.json文件中
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack" // 添加},
package.json中的scripts脚本在执行时，会按照一定顺序寻找命令对应的位置：
- 首先，找本地的node_modules/.bin 路径中对应的命令
- 若没有找到，去全局环境变量中找
执行 npm run build ，会进入package.json 找到 “scripts” 下面的 ”build“，执行”build“的值
...02-配置>npm run build会把build的值放到终端执行，相当于： ...02-配置>webpack但与直接执行webpack不同 ： 直接执行webpack会在执行全局webpack通过npm run build 执行webpack ，会优先执行本地webpack全局webpack 和 局部webpack版本可能不同，因为不同的项目可能会依赖不同的webpack版本
安装局部webpack
...02-配置>npm install webpack@3.6.0 --save-dev
安装完成后 package.json文件多出下面代码
"devDependencies": { //开发时依赖"webpack": "^3.6.0"}
开发时依赖： --save-dev。 webpack就是，打包完后就不需要用到webpack了
运行时依赖
