webpack-配置文件_webpack配置文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45002586/article/details/127841701

本文介绍了webpack的基础配置，包括entry、output、mode等关键选项，并展示了如何设置开发和生产模式。同时，强调了配置文件命名及使用npx webpack命令打包时的注意事项，以及如何在package.json中设置脚本来简化打包流程。

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

1、webpack常见配置

entry: 需要打包的文件
output: 打包之后输出路径和文件名称
mode: 打包模式 development/production
development: 不会压缩打包后的JS代码
production: 会自动压缩打包后的JS代码

webpack.config.js：

const path=require('path');

module.exports={
    mode:'development',  //指定打包的模式，开发模式：development,生产（上线）环境：production
    entrt:'./index.js',//指定需要打包的文件
    output:{  //指定打包之后文件输出的文件名称和输出的路径
        filename:'bundle.js',  
        path:path.resolve(__dirname,'bundle')
    }
}

2、webpack配置注意事项

通过webpack.config.js打包：npx webpack，配置文件的名称必须叫做: webpack.config.js
如果要使用其它名称, 那么在输入打包命令时候必须通过 --config 指定配置文件名称：npx webpack --config xxx，可以通过npm script来简化：
package.json：

{
  "name": "01-webpack-introductory",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npx webpack --config nj.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}