webpack初始化、安装及测试

初始化

执行npm init命令

初始化之后，文件夹中会自动生成一个package.json文件

 安装webpakc和webpack-cli

全局安装执行npm install webpack webpack-cli -g命令

npm install webpack webpack-cli -g

本地安装执行npm install webpack webpack-cli -D命令

安装之后会项目会自动生成node_modules和package-lock.json文件

测试

在项目中创建src文件夹，并在src文件夹中创建index.js，写上测试代码

function add(a,b){
    return a+b;
}

console.log(add(1,3))

执行打包命令：

开发环境指令： webpack ./src/index.js -o ./build/main.js --mode=development

解释：webpack 会以./src/index.js 为入口文件开始打包，打包后输出到./build/main.js。整体打包环境为开发环境

生产环境指令： webpack ./src/index.js -o ./build/main.js --mode=production

解释：webpack 会以./src/index.js 为入口文件开始打包，打包后输出到./build/main.js

整体打包环境为生产环境

执行命令之后就可以看到生成了输出文件

运行打包后的资源

执行 node命令运行打包后的资源

 可以看到输出了a+b的结果4