webpack-demo

最新推荐文章于 2022-09-15 14:57:29 发布

Judian6974

最新推荐文章于 2022-09-15 14:57:29 发布

阅读量302

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/Judian6974/article/details/79281948

版权

webpack 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

首先建立基本项目结构
在上一篇博客写到项目目录安装前有个初始化，npm init，生成后npm终端会显示一长串的问答，其中就有项目名，依据自己填写的项目名，打开开发者工具，在文件夹下建立dis文件夹和src文件夹。

dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。

我对于dist文件是，打包后生成的文件夹，src是源码文件夹。一个是用于生产环境，一个是用于开发环境。

编写程序文件
/dist/index.html

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

这里的 bundle.js文件是用webpack执行打包命令后生产的文件到dist里的。

src/entery.js–>入口文件

document.getElementById('title').innerHTML='Hello Webpack';

这段代码意思就是在id=‘title’的标签里加上‘Hello Webpack’。

第一次webpack打包
在npm终端打包的基本使用方法：
webpack {entry file} {destination for bundled file}

{entery file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。

注意：这里为了更好的看出文件名我加了{}，在命令中是不需要{}的

我写的案例中，命令如下

webpack src/entry.js dist/bundle.js

查看结果
这里我用的live-server来看效果，若是你没有安装过，可以通过下面命令来进行全局安装：
npm install -g live-server
安装好之后命令live-server回车，就会自动打开浏览器，之后就会看到打包后的一个效果。

小知识点
若你觉得你的webpack版本过低，你可以把node_modules文件夹删除，通过npm install再重新安装新的node_modules文件夹，再通过下面命令重新安装webpack：
npm install --save-dev webpack

Judian6974

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack-demo

首先建立基本项目结构在上一篇博客写到项目目录安装前有个初始化，npm init，生成后npm终端会显示一长串的问答，其中就有项目名，依据自己填写的项目名，打开开发者工具，在文件夹下建立dis文件夹和src文件夹。dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编
复制链接

扫一扫