webpack使用

webpack最基本的使用

1.在项目源目录下进入cmd，键入npm init -y,生成package.json

2.安装jquery,键入npm i jquery -S

3.在main.js中导入jquery

4.webpack .\src\main.js -o .\dist\bundle.js

5.引用webpack处理后的js文件

成功！

package.json加上mode

 {
  "name": "webpackstudy",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "description": ""
}

webpack.config.js

//这个配置文件，其实就是一个node文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports={
  entry:path.join(__dirname,"./src/main.js"),//入口
  output:{//输出文件配置
    path:path.join(__dirname,"./dist"),
    filename:'bundle.js'//指定输出文件的名称
  }

}

me,"./dist"),
filename:‘bundle.js’//指定输出文件的名称
}

}

在项目根目录下放置此配置文件，之后直接用webpack命令运行，入口与出口如配置文件所示