webpack学习笔记（2）：webpack的超级简单的例子

最新推荐文章于 2024-08-20 17:38:15 发布

wujiayucn

最新推荐文章于 2024-08-20 17:38:15 发布

阅读量311

点赞数

分类专栏： # webpack

本文链接：https://blog.csdn.net/wjyyhhxit/article/details/119386605

版权

webpack 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这篇博客通过一个简单的webpack配置案例，介绍了如何新建配置文件、创建项目目录、编写功能代码、执行打包操作，并利用npm script运行webpack。在完成打包后，详细解释了npm script的运行原理以及如何配置和执行相关命令。

摘要由CSDN通过智能技术生成

一个超级简单的例子

新建一个webpack配置文件

文件： webpack.config.js


const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production'
};

创建 src目录
创建一个简单的功能
写入文件 helloworld.js

export function helloworld() {
    return 'Hello webpack';
}

创建index.js

import { helloworld } from './helloworld';

document.write(helloworld());

执行打包

➜  webpack-project ./node_modules/webpack/bin/webpack.js 
asset bundle.js 55 bytes [emitted] [minimized] (name: main)
orphan modules 60 bytes [orphan] 1 module
./src/index.js + 1 modules 133 bytes [built] [code generated]
webpack 5.48.0 compiled successfully in 203 ms

此时发现在项目目录中会有一个dist目录，在dist目录中有文件bundle.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e7B6oZub-1628064492615)(evernotecid://DD876EEF-E183-4B43-8B00-6200041EC9E3/appyinxiangcom/22553815/ENResource/p1101)]

在dist目录中新建一个index.html并使用bundle.js、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkUAXKtD-1628064492618)(evernotecid://DD876EEF-E183-4B43-8B00-6200041EC9E3/appyinxiangcom/22553815/ENResource/p1102)]

使用npm script 运行 webpack

在 package.json的 script中写命令

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.48.0",
    "webpack-cli": "^4.7.2"
  }
}

原理：模块局部安装会在 node_modules/.bin目录创建软连接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lVv33PwT-1628064492621)(evernotecid://DD876EEF-E183-4B43-8B00-6200041EC9E3/appyinxiangcom/22553815/ENResource/p1103)]

然后在scripts中写入需要执行的命令，就会去node_modules/.bin寻找

重新执行打包

执行命令：

npm run build

执行结果

➜  webpack-project npm run build

> webpack-project@1.0.0 build
> webpack

asset bundle.js 55 bytes [emitted] [minimized] (name: main)
orphan modules 60 bytes [orphan] 1 module
./src/index.js + 1 modules 133 bytes [built] [code generated]
webpack 5.48.0 compiled successfully in 192 ms