1. 生成pakage.json

  1. 1. cnpm init -y 生成pakage.json   yarn init -y
  1. "main": "index.js",//删除
  2. "private":true,//添加

2. .gitignore

  1. 2. 新建 .gitignore    输入node_modules

3. 安装webpack、webpack-cli

  1. 3. cnpm i webpack webpack-cli -S  or  yarn add webpack webpack-cli

4. 新建 webpack.config.js

  1. const webpack = require("webpack");
  2. const path = require("path");//解决路径问题
  3. const config = {
  4.     entry:path.resolve(__dirname,'src/main.js'),//入口文件 当前目录下的src/main.js join/resolve都可
  5.     output:{  //出口文件
  6.         path:path.resolve(__dirname,'dist'),//出口的路径
  7.         filename:'bundle.js'
  8.     },
  9.     mode:'development'//模式：开发版本 
  10. }
  11. module.exports = config;

5. 创建src/main.js

  1. console.log("hello world");//随便写一句

6. 配置build

  1. 5. package.json:
  2. //修改这段
  3.   "scripts": {
  4.     "build": "webpack --config webpack.config.js"//or "build": "webpack"
  5.   },

7. 对项目进行打包

  1. npm run build
  2. 自动生成dist->bundle.js

8. 新建目录public

  1. 1. 新建index.html
  2. 2. 导入<script src="../dist/bundle.js"></script>
  3. 3. 浏览器看是否输出main.js中的语句，若输出则项目打包完成