跳到主要内容

基本使用

什么是Webpack​

官⽅网站：https://webpack.js.org/

中文：https://www.webpackjs.com/concepts/

github:https://github.com/webpack/webpack

webpack is a module bundler.(模块打包⼯工具)

Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的⼀一些浏览器器不能直接运⾏的扩展语⾔（Scss， TypeScript等），并将其打包为合适的格式以供浏览器器使⽤用。

安装webpack​

webpack-cli 可以帮助我们在命令行⾥使用npx ,webpack等相关指令

  • cli :命令行界面（Command Line Interface for batch scripting）

全局 (不推荐)​

全局安装的话，版本就固定了，因为webpack更新速度很快，如果在做某个项目固定了webpack版本，另一个项目是另外一个webpack，导致会很不方便

text
npm install webpack webpack-cli -g
webpack -v
npm uninstall webpack webpack-cli -g   //卸载

局部安装 (推荐)​

局部安装 就是你项目用的哪个版本就是哪个版本，项目之间互不影响

text
npm install webpack webpack-cli -D

安装指定版本​

text
npm info webpack//查看webpack的历史发布信息
npm install webpack@x.xx webpack-cli -D

检查是否安装成功​

  • 局部安装：如果使用webpack -v，是找不到的，因为这条命令是指向全局安装的bin目录下去寻找的
  • 但是没关系,node提供了一个npx命令，通过 npx webpack -v查看版本
  • 也可以在当前项目找到.bin\webpack 来查看版本
text
PS D:\Files\前端项目\webpack\webpack-demo> npx webpack -v
4.42.1
PS D:\Files\前端项目\webpack\webpack-demo> .\node_modules\.bin\webpack -v
4.42.1

webpack 命令行常用命令​

  • 查看版本

    text
    npx webpack-v

  • 启动webpack，打包入口文件

    text
    npx webpack

    使用 npx webpack 我们并没有指定入口文件，它就会去找默认的入口文件

    • 默认的入口文件就是src/index.js

    指定入口文件打包： npx webpack index

webpack配置文件​

  • 零配置是很弱的，特定的需求，总是需要⾃己进行额外的配置
text
module.exports = {
entry: "./src/index.js",//默认的⼊口文件
output: "./dist/main.js"//默认的输出
};

  • 当我们使⽤npx webpack,，表示的是使⽤webpack处理打 包，./src/index.js的⼊⼝模块。默认放在当前目录下的dist⽬目录，打包后的 模块名称是main.js，当然我们也可以修改

  • webpack有默认的配置⽂件，叫webpack.config.js，我们可以对这个⽂件 进行修改，进行个性化配置

  • 默认的配置⽂件

    text
    npx webpack //执行命令后，webpack会找到默认的配置⽂件，并使⽤用执⾏

  • 不使用默认的配置文件： webpack.config.js

    text
    npx webpack --config webpack.config.js //指定打包文件webpack.config.js
    • npx webpack webpack.config.js
      • webpack.config.js文件来作为配置文件并执行

  • 修改package.json scripts字段：有过vue react开发经验的同学 习惯使 ⽤npm run来启动，我们也可以修改下，原理就是模块局部安装会在 node_modules/.bin⽬目录下创建一个软链接。

环境区分​

  • webpack-merge :合并webpack配置
    • webpack.common.js、webpack.dev.js、webpack.prod.js
  • cross-env模块：可以跨平台设置的和使用环境变量（Node中的环境变量）的脚本

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间

  • 通常建议为每个环境编写彼此独立的 webpack 配置

  • 判断当前环境：process.env是Nodejs提供的一个API,返回所有环境变量，那么如果想用process.env.NODE_ENV，就必须先设置其值才能用。

    • cross-env库来设置当前环境变量
    • 通常在package.json来进行设置

cli命令说明​

文档：https://webpack.docschina.org/api/cli/#environment-options

  • progress

查看 webpack 的编译进度，你可以使用 --progress

text
npx webpack --progress
  • color

启用控制台颜色

text
npx webpack --color
  • hot

启用 HMR 热更新

text
npx webpack --hot // 简写-h
  • devtool

控制是否生成 source map，以及如何生成

text
npx webpack --devtool //简写-d