基于webpack，不使用任何脚手架，创建纯粹的webpack项目

问问计算机

发布于 2023-02-24 10:43:26

5950

发布于 2023-02-24 10:43:26

文章被收录于专栏：问问计算机

明确webpack的实现原理，不掺杂其他的脚手架之类的东西会更直白，更有力。

1.新建一个目录，通过 npm init 初始化一个项目，这个时候仅生成一个package.json 文件，如下：

从图中的描述可以很明确的描述：This utility will walk you through creating a package.json file. 这一步骤引导创建一个 package.json 文件。有时候匆忙走过的路，偶尔停下来歇歇脚，看一看，兴许也会有令人愉快的发现。

根据引导提示，完善包名、版本、描述、入口文件等信息，也可以直接回车跳过，暂时不填。完成之后项目根目录下有且仅由一个package.json文件。内容如下：

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "askcomputer",
  "license": "ISC"
  }

2.添加能够基于浏览器展示的基础 index.html 文件。

小TIPS：介绍一个vscode下添加html内容的快捷方式：输入感叹号后弹出右侧的Emet Abbreviation，然后直接回车，如下：

index.html的内容如下：

<!DOCTYPE html><html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app"></div>
      <script src="./dist/bundle.js"></script>
    </body>
</html>

3.基于前面文章关于CommonJS，聊一聊你可能不知道的内容在CommonJS 模块规范的基础上创建入口文件和组件模块，如下：

①main.js

br

②init.js

function init(content)
{
    window.document.getElementById('app').innerHTML= content;
}
module.exports=init;

文件分配的路径如下：

这里的文件路径是根据工程本身的条件自己定义的，它并不是固定的。但是关键问题是 webpack.config.js 和 package.json 中的配置要对应上，如下：

③webpack.config.js

const path=require('path');
module.exports={
    entry:'./main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'../dist')
    }
}

这里的 ../dist 是指相当于当前 webpack.config.js 路径的上一级相对路径下的 dist 文件夹，如果这里使用 ./dist 的情况下，就会在当前的 component 文件夹在 npm run build 步骤执行后生成 component/dist 的路径。如果这样会导致步骤2 中找不到 dist 文件夹。所以这里要灵活掌握。

④package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "webpack原理",
  "main": "main.js",
  "scripts": {
    "build": "webpack --progress --config ./config/webpack.config.js"
  },
  "author": "askcomputer",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

其中的 build 属性只是针对运行 npm run 命令后的一个参数名称。具体原理参考之前的文章 npm run dev 后 webpack-dev-server 做了哪些事情。

在上述步骤完成之后，在当前工程的根目录下打开终端，运行 npm run build 就能基于 webpack 生成上述步骤 ③ 中配置的 output 属性下的 filename 对应的文件，如下：