前端webpack入门学习使用

webpack是前端打包工具，将多个静态资源打包到一起

全局安装webpack:

npm install -g webpack webpack-cli

或者：

npm install -g webpack

npm install -g webpack-cli

安装后使用webpack -v 查看是否安装成功

然后我新建两个js文件

01.js中定义一个info的方法：

02.js中定义一个add方法：

 然后通过webpack将这两个js文件打包成一个文件，同时包含两个方法

这个时候我新建一个js文件，名字为main.js ,引入01.js和02.js (通过es5引入演示)

 然后在根目录下创建打包的配置文件webpack.config.js  配置文件内容如下：

const path=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js'//输出文件
   }
}
 

 配置文件中：入口文件main.js  输出路径：dist  所以要新建一个dist文件夹

然后根目录下执行打包命令：webpack  --mode=development 

这个时候dist目录下就会有bundle.js

 

这个时候就相当于通过webpack将01.js和02.js打成了bundle.js 

有兴趣的可以在页面引入bundle.js看一下效果。