webpack的一些基本配置

最近在学vue，把webpack的一些相关的一些基本知识记录一下，毕竟自己不是主要用vue的，不记录过几天就忘了。

安装webpack和webpack-cli

npm i -D webpack
npm i -D webpack-cli
注意：webpack官网并不提倡全局安装，一开始我为了图省事全局安装了，结果运行webpack-dev-server各种报错，最后还是本地安装
安装好这两个之后就需要进行相应的配置，为项目进行配置，使webpack为我们的项目工作
在项目根目录下创建webpack.config.js文件，webpack是基于node编写的，所以node语法适用

const path = require("path");
module.exports = {
   
    // 入口，表示要使用webpack打包哪个文件
    entry: path.join(__dirname, "./src/main.js"),
    output: {
   
        // 指定打包好的文件输出到哪个目录中去
        path: path.join(__dirname, "./dist"),
        // 指定输出文件的名称
        filename: "bundle.js"
    },
}

配置了之后就可以直接运行webpack命令进行打包了，webpack的打包流程为

• 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
• webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
• 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
• 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；

再安装一个自动打包的工具

npm i -D webpack-dev-server
在安装了webpack-dev-server之后，可以在package.json中配置脚本，让命令简单点
在script属性中配置"dev": "webpack-dev-server"，配置了这个命令之后，以后可以直接这么运行：npm run dev，webpack-dev-server有两种配置方式

• 方式1：在package.json的scripts节点配置，见dev

 "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
    "dev2": "webpack-dev-server"
  },

• 方式2：同样先在package.json的scripts节点配置，见上面代码块的dev2
  先添加devServer节点并配置

devServer: {
   
        // 自动打开浏览器
        open: true,
        // 启用端口
        port: 3000,
        // 指定托管目录
        contentBase: "src",
        // 启用热更新 第1步
        hot: true
},

因为启用了热更新，需要为热更新配置，在webpack.config.js中导入相应的包

// 启用热更新的第2步
const webpack = require(