webpack初使用

1、node环境，我的是node: v16.15.0  npm:8.5.5

2、运行npm init 创建package.json文件

3、配置淘宝镜像源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、运行 

cnpm install -D webpack
cnpm install -D webpack-cli

如果运行以上报错，就把cnpm替换成npm

5、 在package.json同名目录下新建一个webpack.config.js配置项文件

6、在package.json文件中新增一个"script"的配置项，如果package.json里面存在该配置项，就直接在其里面写入

"build": "webpack --config webpack.config.js"

 7、项目基本结构

其中dist是webpack打包后生成的文件，src里面是你项目的源码

接下来就编写webpack.config.js里面的配置项其余配置项详见webpack | webpack 中文文档 | webpack 中文网 (webpackjs.com)

 8、以上最基础的配置完成后，在终端处输入以下命令启动webpack

 npm run build

 

注意：webpack.config.js文件里必须要有基础配置，注意路径、文件名等要与项目文件保持一致，否则打包会报错。 

 9、Node.js里面的一些基础了解

关于path：path是Node.js的一个模块，提供一些有关路径处理的工具函数。

关于require：Node.js采用CommonJS规范（具体规范内容可以百度更详细的文章）。而这个规范是使用require函数引入模块、使用module.exports来输出一个模块。

关于resolve：resolve是path模块提供的一个函数。这个函数可以接受若干个参数，最终返回一个拼接完成后的地址。

关于__dirname：这个是node内置的变量，总是指向当前文件的绝对路径。