Webpack环境的快速搭建

最近搭建了一个简单的webpack环境用来实现diff算法，结果遇到了一些坑，所以这里记录一下。

一、搭建的前置准备工作

一般创建完一个项目，都会通过npm init来初始化一下

然后就是安装各种依赖，这里需要用到webpack的相关依赖包，所以需要执行一下命令：

npm install webpack@5.73.0 -S
npm install webpack-cli@4.10.0 -S
npm install webpack-dev-server@4.9.3 -S

其中webpack是用来构建打包前端项目的工具
而webpack-cli则是它的命令后工具，原本是合在webpack里面，4.0版本之后被单独拆分出来
webpack-dev-server是一个开发服务器，它可以让项目在本地直接跑起来，方便开发者进行调试。其本质就是一个express服务器，编译后产生的文件都保存在内存中，所以我们无法通过目录查看。

webpack用的5.x版本，而命令行跟开发服务器用的都是4.x的版本。
而网上有些教程用的是4.x跟3.x版本，这两个版本配置是完全不一样的，这就导致我配置完之后完全跑不起来

二、具体配置

安装完依赖包之后，就需要在跟目录创建一个webpack.config.js，用来配置各种打包参数。

当前项目简单配置了webpack的输入输出目录，以及devServer的静态资源目录，端口等：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        // 定义入口文件是index.js
        index: path.resolve(__dirname, 'src/index.js')
    },
    output: {
        // 定义输出的文件夹是dist
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名是index.js
        filename: 'index.js'
    },
    // 配置devServer参数
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 9000,
    }
}

接着在package.json中定义运行的参数：

{
  ......
  "scripts": {
    "dev": "webpack-dev-server --open --config webpack.config,js", // 注意：最新版本如果不置顶webpack.config.js的路径，webpack-dev-server是不会读取的
    "build": "webpack --config webpack.config,js"
  }
  ......
}

搭建后项目的结构：

-- node_modules
-- public
---- index.html
-- src
---- index.js
-- package-lock.json
-- package.json
-- webpack.config.js

这样项目就能真正跑起来了

参考

从零开始搭建一个 Webpack 开发环境配置（附 Demo）
Webpack Dev Server Config - contentBase not working in latest version
Vue「一」—— webpack 的基本使用及常用配置
webpack 最佳实践