好像由于版本的更新，之前看的一些文章跟视频里的打包方法总是会报错，所以研究了下最新版本的方法
首先要保证安装了nodejs的前提下来按照我的步骤来一步一步走：
1.新建一个文件夹 webpack-study ,通过命令行 npm init -y初始化项目文件
（我这里直接用的vscode自带的终端）
运行npm init也可以，但是接下来会有一堆输出，我这里用的npm init -y 直接同意所有项的默认值，
这时候项目文件夹多了一个配置文件：package.json，它定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。我们用npm install 命令下载包的时候，就是根据这个配置文件，自动下载所需的模块。
2.接下来要安装webpack,运行 npm i webpack --save-dev在项目的本地安装
虽然我已经（npm i webpack -g）全局安装，但是到了项目里，有时候我们需要使用其他的第三方包，这些包有的就要求在项目里本地安装有webpack，否则不能正常使用，比如：webpack-dev-server这个工具就是如此。
安装好后，在配置文件中就可以看到了
这时候文件多了两个包
3.在项目根目录下新建example.js 内容如下
example.js
4.输入打包命令，对example.js进行打包webpack example.js example.bundle.js,然后就报错了
error
5.红色的原因是我们用的webpack是4.+ 版本，跟3.+ 版本的api已经不一样了，所以需要更换打包命令为：webpack example.js -o example.bundle.js
6.黄色部分的警告的意思是,没有设置模式。webpack4引入了模式,有开发模式,生产模式,无这三个状态，我们需要去配置文件package.json中配置。
"dev":"webpack --mode development",
"build":"webpack --mode production"
image.png
延伸npm run dev跟npm run build区别
dev当用户使用该模式的时候，会打包出包含注释和格式等未压缩状态的代码(开发环境输出的index.js没有压缩)
build当用户使用该模式的时候，会打包出最小的压缩生产环境代码(生产模式输出的index.js压缩过)
7.新建一个index.html,引入该打包文件并运行
运行
8.运行npm run dev,提示安装webpack-cli，我们先no,然后npm install --save webpack-cli安装webpack-cli
image.png
9.再次运行npm 还是报了一堆错，但是多出来一个文件夹dist（后面用来存放项目打包输出的文件）
error
原因是输入命令 npm run dev 的时候，会默认去项目的根目录下的src子目录里找一个叫做index.js的文件，然后试图把它打包，输出成一个名为main.js的文件；这个main.js文件是默认存放在根目录下的dist子目录下。但是我们一开始安装webpack的时候并没有这些个目录生成，所以更别提什么index.js文件了。所以这些我们需要手动创建
10.我们先创建src（存放源代码）文件夹，在src里再创建index.js文件，作为项目的JS入口文件
index.js
这时候没有报错了
并且dist文件夹下多一个main.js文件
11.这时候新建一个index.html页面把main.js引入运行页面也没有问题了
index.html
12.打包指定目录下的指定文件，并且以指定的目录和指定的文件名输出
webpack ./src/xxx.js -o ./dist/xxx.js --mode development
比如我要把src下的test.js文件打包为dist中的test.js输出则
webpack ./src/test.js -o ./dist/test.js --mode development
参照上面的方法运行也正常
感谢提供参考排雷
网友评论