webpack学习

1. npm init -y初始化一个项目，生成package.json文件
   2.新建一个src目录，因为webpack默认执行的入口文件是src目录下的js文件
   3.src目录里面，新建一个xxx.js文件，里面随便写一些js内容
   4.npm i -D webpack webpack-cli 安装两个依赖
   5.修改package.json文件里面scripts，添加一个"build":"webpack"，key可以随意定义
   至此，一个最简单的使用webpack打包的项目就完成了
   只需要执行npm run build即可执行打包命令，默认在dist目录下生成打包后的文件

webpack默认只认js文件，默认入口是src目录，默认出口是dist目录
如果想让webpack认识html文件，并自定义出入口，就需要新建webpack.config.js文件
使用module.exports ={ }，导出一个对象配置文件

1.html插件，yarn add -D html-webpack-plugin，安装插件
2.配置文件里引入const HtmlWebpackPlugin = require('html-webpack-plugin');
3.plugins是个数组配置，里面把html插件new一个实例引入

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode:"production",
    entry:"./src",
    output:{
        path:path.join(__dirname,"aaa"),//输出到aaa文件夹
        filename:"[name].[hash:8].js" //输出文件名.8位hash.js
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

webpack 4 默认入口 ./src/index.js
output默认出口是 ./dist/main.js