0、新建项目 名称demo
1、创建目录 src/main.js
//随便在main.js文件中输出个东西
console.log('这是main.js')
2、初始化
切换到demo项目下
yarn init -y
3、安装依赖(-D将依赖记录成开发依赖,只是在开发中需要依赖,实际线上不需要)
yarn add webpack webpack-cli -D
安装完成之后,项目下会多出一个node_modules文件,文件下就是各种依赖包
4、到package.json中配置scripts执行脚本
"scripts": {
"start": "webpack-dev-server --config=config/webpack.dev.js",
"build": "webpack --config webpack.dev.js"
},
配置bulid命令和start启动命令
5、新建webpacke.config.js文件
配置 入口 、出口、 开发模式
// 新建文件用来配置webpack配置文件,导出配置对象,给webpack使用
module.exports={
//1、入口,从那个文件开始打包
entry:'./src/main.js',
//2、出口对象
output:{
path:'./dist',//打包到哪里去,打包路径
filename:'bundles.js'//打包后生成的文件名
},
//3、模式mode development开发模式未压缩, production生产模式压缩
mode:'development',
}
6、yarn build打包测试
yarn build
打包后会生成一个dist文件夹,下面就是打好的代码包
7、多个文件实现打包
新建aa.js,在main.js中引入aa.js,打包后发现只有一个包。
打包后