vscode安装配置webpack5.16

1.首先安装node.js,查看自己的版本，打开cmd,输入node -v查看版本号，还有npm

2.创建空文件夹webpackdemo，打开进入文件夹，在终端输入npm init -y 初始化项目生成默认的package.json,

这是会有小伙伴不理解这一步，如下解释

  2.1 为什么要初始化项目？ 

   在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版     本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发     送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。

3.建议局部安装使用npm install wepack webpack-cli -D，安装之后自出现node_modules，打开里面会有webpack和webpack-cli。

4.之后检测版本npx webpack -v,我安装的是最新版，小伙伴想安装其他版本可以使用npm install webpack@1.31.x --save-dev

5.至此安装好之后，使用webpack测试打包，首先打开你的package.json,将script里改为"build":"webpack",我使用的是这种方法 ，

6.在你的根目录下新建webpack.config.js，输入以下内容，（入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认值是 ./src/index.js）

const config = {

entry:'./src/index.js'

}

module.exports = config

7.然后在根目录新建src文件夹，在src文件夹里新建index.js,index.js里打印内容即可，用来测试

8.最后执行npm run build,自动生成dist下的main.js。至此打包构建成功