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目录下才能够执行；直接在代码根目录执行报错；不知道为什么。