webpack 项目使用--创建webpack 项目（1）

最新推荐文章于 2024-01-29 14:27:07 发布

我是大头鸟

最新推荐文章于 2024-01-29 14:27:07 发布

阅读量450

点赞数

分类专栏： webpack 文章标签： webpack webpack项目

本文链接：https://blog.csdn.net/datouniao1/article/details/119426913

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.新建一个文件夹假设文件夹的名称为 wdgapp，并且通过命令行到该目录下

2. 初始化项目

npm init -y

3.在wdgapp 文件夹中创建src 文件夹（源代码）和dist（编译生成文件）

并且在src文件夹中新建index.html 文件和 index.js 文件

编辑index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <<title>hello</title>
    </head>
    <body>
       <h1>Hello World</h1>
    </body>
</html>

编辑index.js文件：

console.log("ok")

4. 安装webpack 和webpack-cli

执行：cnpm i webpack -g

执行：cnpm i webpack-cli -g

5. 创建webpack.config.js文件（ webpack 的配置文件）

module.exports={}

6 执行webpack 命令，打包

上面这个提示表示我们需要配置当前的编译环境 mode的值有development和production

因为我们是开发测试所有可以设置为：development

在webpack.config.js 中：

module.exports={
    mode:'development'
}

重新打包：

打包成功

这样在dist 文件夹中生成main.js 文件：

我们在index.html 页面中引入main.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hello</title>
        <script src="../dist/main.js" type="text/javascript"></script>
    </head>
    <body>
       <h1>Hello World</h1>
    </body>
</html>

然后使用浏览器打开index.html页面：

上面就是我们使用创建一个webpack 项目的过程

需要注意的几点：

1. 编译生成的目标文件夹为dist

2. 从webpack4.x开始默认的入口文件为 src---->index.js

希望对你有所帮助

我是大头鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack 项目使用--创建webpack 项目（1）

1.新建一个文件夹假设文件夹的名称为 wdgapp，并且通过命令行到该目录下2. 初始化项目 npm init -y3.在wdgapp 文件夹中创建src 文件夹（源代码）和dist（编译生成文件）并且在src文件夹中新建index.html 文件和 index.js 文件编辑index.html:<!DOCTYPE html><html lang="en"> <head> <me...
复制链接

扫一扫