webpack项目的手动创建

最新推荐文章于 2023-08-24 09:46:22 发布

菜鸟猪猪侠yy

最新推荐文章于 2023-08-24 09:46:22 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/qq_41743601/article/details/119103764

版权

手动创建一个简易webpack项目

一.创建存放webpack项目并安装webpack所需包

首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

现在，我们将创建以下目录结构、文件和内容：

project

webpack-demo
|- package.json

|- index.html
|- /src
|- index.js

src/index.js文件：

function component() {
  const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());



index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

Tip：我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。

三.修改packjson文件

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2",
   }
 }

四.创建一个 bundle

首先，我们稍微调整下目录结构，创建分发代码(./dist)文件夹用于存放分发代码，源代码(./src)文件夹仍存放源代码。源代码是指用于书写和编辑的代码。分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。调整后目录结构如下：

project

webpack-demo
|- package.json

|- /dist
|- index.html

|- index.html
|- /src
|- index.js

五.index.js 中打包 lodash 依赖

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

npm install --save lodash
Tip

src/index.js 中 import lodash：

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');

-  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
+  // lodash 在当前 script 中使用 import 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

注意：前面的“+”代表新加入的，“-”代表移除的。

六.打包所有脚本

现在，我们将会打包所有脚本，我们必须更新 index.html 文件。由于现在是通过 import 引入 lodash，所以要将 lodash

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
-    <script src="https://unpkg.com/lodash@4.17.20"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

七.最后

执行 npx webpack，会将我们的脚本 src/index.js 作为入口起点，也会生成 dist/main.js 作为输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：

$ npx webpack
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1851 ms

菜鸟猪猪侠yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack项目的手动创建

手动创建一个简易webpack项目一.创建存放webpack项目并安装webpack所需包首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev二.在该目录中创建如下目录结构现在，我们将创建以下目录结构、文件和内容：p
复制链接

扫一扫