webpack局部版本安装、打包

最新推荐文章于 2022-11-08 23:22:35 发布

gt_1992

最新推荐文章于 2022-11-08 23:22:35 发布

阅读量1.7k

点赞数

分类专栏： VUE 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/gt_1992/article/details/123486834

版权

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Webpack的局部安装步骤，包括通过npminit创建项目、安装Webpack和webpack-cli，以及如何配置webpack.config.js文件。此外，还详细讲解了在package.json中设置scripts脚本以运行webpack进行项目打包，并提到了可能遇到的问题及解决方法。

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

webpack局部版本安装、打包

Webpack有两种安装方式：
全局安装：安装Webpack到全局后，可以在任何地方共用一个Webpack可执行文件，而不用各个项目重复安装。
局部安装：（推荐）安装到某个项目中，可防止不同项目依赖不同版本的 Webpack 而导致冲突。
此处不对全局安装进行论述。

局部安装 Webpack

1、新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json；

2、创建src源代码目录，程序代码在此目录下进行维护
在这里插入图片描述
3、执行 npm install jquery –S命令，安装jquery插件；(非必要执行)

4、执行npm install webpack webpack-cli -D命令，安装webpack以及webpack-cli;

5、安装完成后，我们可以进入项目的node_modules/.bin/目录下查看webpack的版本。

node_modules/.bin/webpack -v
node_modules/.bin/webpack-cli -v

在项目中配置 webpack

1、在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置

module.exports = {
    mode : 'development'    // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
}

2、在 package.json 的 scripts 节点下，新增 dev 脚本；

"dev" : "webpack"

在这里插入图片描述
3、在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
注意：npm run dev 命令在node_modules/.bin目录下才能够执行；直接在代码根目录执行报错；不知道为什么。