2 基本使用

作用：
1、可以写es6代码
2、es6模块化
3、压缩代码

2-1 配置

cnpm init -y
cnpm i webpack webpack-cli -S
yarn init -y
yarn add webpack webpack-cli

2-2 创建src文件夹

src index.js

# index.js
console.log("hello")

2-3 新建webpack.config.js

//模快化语法
const path = require("path");
module.exports ={
  //开发模式
    mode:"development",
  //打包入口 从哪一个文件开始打包
    entry:path.join(__dirname,"src","index.js"),
 // 打包好的文件放在哪里
    output:{
      //路径
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }，
}

2-4 配置脚本

# package.json
"scripts": {
    "build": "webpack",
  },

2-5 执行脚本

npm run build

打包完毕，生成文件

plugins

1 给打包文件一个html文件

src index.html

#index.html
<div>webpack 入门</div>

配置

cnpm i html-webpack-plugin -S
yarn add html-webpack-plugin
//自动生成index.html文件

webpack.config.js

引入
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports ={
  ...
plugins:[
        new HtmlWebpackPlugin({
          //以哪个文件为模板
            template:path.join(__dirname,'src','index.html'),
          //文件名
            filename:'index.html'
        })
    ],
}

打包完毕 自动引入html