webpack之基础xue

最新推荐文章于 2023-07-14 00:31:45 发布

优质果

最新推荐文章于 2023-07-14 00:31:45 发布

阅读量191

点赞数

分类专栏： webpack 学习文章标签： webpack入门

本文链接：https://blog.csdn.net/zuoqin314/article/details/78715784

版权

学习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

1、安装

新建一个文件夹（此处命名为webpack sample project），在终端转到该文件夹后执行npm install -g webpack实现全局安装

2、准备工作

在webpack sample project文件夹下创建app文件夹（用来存放原始数据和我们将写的javascript模块）和public文件夹（用来存放之后供浏览器读取的文件，包括使用webpack打包生成的js文件以及一个index.html文件），现在在新建三个文件：

index.html--->放在public文件夹中

Greeeter.js--->放在app文件夹中

main.js--->放在app文件夹中

index.html写入如下代码：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>

Greeter.js 中定义一个返回包含问候信息的 html 元素的函数,并依据CommonJS规范导出这个函数为一个模块

//Greeter.js
//依据CommonJS规范导出这个函数为一个模块
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
};

main.js 文件中我们写入下述代码，用以把 Greeter模块 返回的节点插入页面。

//main.js
//把Greeter模块返回的节点插入页面
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

3、使用webpack

webpack可以在终端使用，使用的方法是webpack {extry file} {destination for bundle file}

{extry file}为入口文件的路径

{destination for bundle file}为打包文件的存放路径（这里命名为bundle.js）

所以这里在终端处输入命令webpack app/main.js public/bundle.js

(如果前面webpack不是全局安装的而是用的npm install --save-dev webpack，这里的命令就是node_modules/.bin/webpack app/main.js public/bundle.js)

可以看到同时编译出main.js和Greeter.js文件

现在打开index.html就可以看到效果图如下：

优质果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack之基础xue

1、安装新建一个文件夹（此处命名为webpack sample project），在终端转到该文件夹后执行npm install -g webpack实现全局安装2、准备工作在webpack sample project文件夹下创建app文件夹（用来存放原始数据和我们将写的javascript模块）和public文件夹（用来存放之后供浏览器读取的文件，包括使用webpack打包生成的j
复制链接

扫一扫