webpack 相关知识梳理

本文梳理了webpack的基础命令和配置文件,重点介绍了如何使用npm scripts简化webpack配置,通过package.json的scripts属性来便捷地执行构建任务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、 webpack 基础命令

查看webpack版本信息:npm info webpack versions
全局安装:npm install webpack webpack-cli -g
全局安装指定版本:npm install webpack@4.16.5 webpack-cli -g
卸载全局安装:npm uninstall webpack webpack-cli -g
查看版本:webpack -v (node.js会在全局的模块目录中去找这个命令,没有安装会找不到这个命令的)
项目内安装:npm install webpack webpack-cli --save-dev(--save-dev可以等价为-D)
查看项目内webpack版本:npx webpack -v
npm install webpack --save
使用项目webpack打包js文件:npx webpack Xxx.js
使用全局的webpack打包js文件:webpack Xxx.js
 初始化npm:npm init -y
安装项目依赖包:npm install
在vue中运行项目:npm run dev
打包: npm run build

二、 webpack 配置文件

当我们使用  npx webpack xxx执行打包命令的时候,似乎没有看见配置文件的影子,其实这个时候使用的是webpack的默认配置

默认的配置文件:webpack.config.js
const path = require('path');
// 配置
module.exports = {
    // 1. 项目重那个文件开始打包
    entry: './src/index.js',
    // 2. 打包文件放到哪里
    output: {
        // 3. 打包好的文件的名字
        filename: 'bundle.js',
        // 4. 打包出的文件放在哪个文件夹下 path要是绝对路径
        // __dirname就是webpack.config.js的绝对路径,和dist结合
        // 不写效果一样,默认就是
        path: path.resolve(__dirname, 'dist')
        // 绝对路径
        // path: path.resolve('F:/Test/GitTest2/')
    }
}

使用 npm scripts 简化配置

在 package.json 里面有一个scripts属性,这个数据是配置执行脚本的

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值