webpack打包0之基本配置

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，打包后发现只有一个包。

打包后