webpack1-打包流程

webpack1-打包流程


  1. 初始化
    命令:npm init -y
    生成的文件:package.json
    在package.json中的scripts中添加
    “dev”: “webpack --mode development”
    “build”: “webpack --mode production”
    webpack1-打包流程

  2. 安装webpack
    2.1 安装全局webpack,安装过全局的webpack则跳过此步骤
    命令:npm i webpack -g
    2.2 安装项目webpack
    命令:npm i webpack -s -d
    生成的文件夹:node_modules
    生成的文件:package-lock.json
    webpack1-打包流程
    2.3 安装项目webpack-cli
    命令:npm i webpack-cli

  3. 拉取jquery
    命令:npm i jquery -S
    生成文件夹:node_modules/jquery
    webpack1-打包流程

  4. 编写xxx.js
    webpack1-打包流程

  5. 打包xxx.js
    命令:webpack 文件目录/xxx.js -o ./dist/xxx-bundle.js --mode development
    例:webpack ./src/js/myDemo.js -o ./dist/myDemo-bundle.js --mode development
    webpack1-打包流程

  6. 在html中引用xxx-bundle.js
    webpack1-打包流程

  7. 页面效果
    webpack1-打包流程