webpack学习笔记-基本使用

114 阅读1分钟

基本使用

webpack 是一个静态资源打包工具

它会以一个或多个文件作为打包入口,将我们的整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏览器端运行了。我们将webpack输出的文件叫做bundle

功能介绍

webpack 本身功能是有限的:

  • 开发模式: 仅能编译js中的 ES module 语法。
  • 生产模式: 能编译js中的 ES module 语法,还可以压js代码。

webpack 基本使用

下载依赖

  • 初始化package.json
npm init

生成package.json文件

tip:package.json文件的name不能叫做webpack,否则下一步会报错

  • 下载webpack

npm install webpack webpack-cli

  • 启用webpack
// 开发模式
npx webpack ./src/main.js --mode=development
// 生产模式
npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装的webpack包的。

./src/main.js:指定webpackmain.js文件开始打包,不但会打包main.js,还会将main.js中的依赖项一起打包。

  • 查看输出文件

默认webpack会将文件打包输出到dist目录下。

webpack本身功能比较少,只能处理js资源,一旦遇到css等其他资源就会报错。所以我们要学习如何使用webpack处理其他资源。