webpack的使用之入口和出口

1.创建一个文件夹
2.针对想要创建的项目来说，先使用初始化项目

npm init -y

项目初始化完成后，分别安装webpack和webpack的脚手架

npm install webpack -D
npm install webpack-cli -D

3.使用编译器打开项目，这里我使用的是vscode，在项目中新建src目录，在该目录下面新建index.js文件
4.在package.json文件的scripts中新增build，这样我们就可以运行该项目

 "scripts": {
    "build": "webpack --mode production",
    "test": "echo "Error: no test specified" && exit 1"
  },

这里面的production可以换成development，分别对应生产模式和开发模式

到这一步我们就可以试试看前面的配置有没有问题：
在终端中运行如下代码

npm run build

此时我们就可以在项目中看见多了一个文件夹dist，里面有一个main.js文件
5.手工配置webpack，在项目中新建一个webpack.congif.js文件，配置如下代码

• 设置入口文件

module.exports = {
    entry: "./src/demo.js", //文件可以修改
}

• 设置出口文件

var path = require("path");

module.exports = {
    entry: "./src/demo.js", //文件可以修改
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "demo.js"
    }
}

也可以将入口文件设置成多入口

entry: {
        home: "./src/index.js",
        leosn: "./src/demo.js"
    },

也可以给出口文件配置hash长度，hash:8，就表示hash长度为8

  output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash:8].js"
    }

我们也可以指定webpack.config.js文件的位置，在package.json中对scripts中的build进行修改，如下代码

 "build": "webpack --mode production --config scripts/webpack.config.js",