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:

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，当然这些入口或者出口的文件和路径都可以自行配置