webpack(1)简单使用
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:
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,当然这些入口或者出口的文件和路径都可以自行配置