0
点赞
收藏
分享

微信扫一扫

前端webpack入门学习使用

caoxingyu 2022-02-24 阅读 50

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看一下效果。 

 

举报

相关推荐

0 条评论