1.首先确保已经安装了node和npm
2.新建一个文件夹demo0，在demo0目录下执行npm init -y。该命令可以生成package.json配置文件
3.在demo0目录下执行：npm install webpack webpack-cli -D。该命令用于安装webpack 和webpack-cli两个包，-D的意思是开发环境下使用，因为webpack是打包工具我们上线的时候使用的是打包后的代码，打包只用于开发环境，所以使用-D。
4.当前目录下新建一个src文件夹，在src文件夹下新建one.js，two.js，index.js。
two.js:
function add(x,y){ return x+y; } module.exports={add};//这里导出使用的Common.js中的模块语法，没有使用es6中的export。 one.js: const {add} = require('./two.js');//这里引入使用的Common.js中的模块语法，没有使用es6中的import。 function getNum(){ return add(5,6); } module.exports = {getNum}; index.js: const {getNum} = require('./one.js'); console.log(getNum());index.js作为入口文件即程序的起始执行文件，index.js中依赖于one.js，one.js中又依赖于two.js
5.现在用webpack来将这个3个有依赖关系的js文件打包为一个：
在demo0目录下执行：npx webpack --mode development//development表示是开发环境的包
或者执行：npx webpack --mode development//production表示是生产环境的包
上面的两个命令都会在demo0目录下生成一个dist的文件夹，dist文件夹中会有一个main.js文件
这个main.js文件就是我们将上面的3个js文件打包后生产的js文件，可以使用node ./dist/main.js命令运行这个文件。
开发环境下打出来的main.js文件中有很多注释和换行文件比较大，生产环境打出来的main.js文件进行了压缩和加密文件很小
这里执行npx webpack的时候默认是去src中找index.js文件作为入口文件，然后打出来生产的js文件默认在。/dist/main.js，当然这些入口或者出口的文件和路径都可以自行配置
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
