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

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

希望对你有所帮助

webpack 项目使用--创建webpack 项目（1）相关推荐

Django项目的创建Django项目的修改配置文件
目录: 创建Django项目 Django的操作 django项目和子应用各文件作用修改Django项目的配置 path() 函数创建Django项目 C:\Users\35211>d: 先 ...
vs2019中如何创建qt项目_VS2019创建新项目居然没有.NET Core3.0的模板?
今天是个值得欢喜的日子,因为VS2019在今天正式发布了.作为微软粉,我已经用了一段时间的VS2019 RC版本了.但是,今天有很多小伙伴在我的<ASP.NET Core 3.0 上的gRPC服 ...
java ejb项目_Maven创建EJB项目结构
可以用maven创建EJB项目的结构. 1.打开cmd 2.输入一下内容mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo.arch ...
怎么创建python django项目_创建Django项目图文实例详解
本文实例讲述了创建Django项目的方法.分享给大家供大家参考,具体如下: 创建Django项目创建一个HelloDjango项目 GitHub地址:https://github.com/liang ...
idea建springcloud项目_idea创建springcloud项目图文教程(EurekaServer注册中心)
http://blog.csdn.net/hcmony/article/details/77854999 idea创建springcloud项目图文教程(EurekaServer注册中心)(六) 1, ...
maven java web项目_Maven创建JavaWeb项目
使用模板创建项目 JavaWeb项目模板使用使用模板创建JavaWeb项目,就是上图的结构.缺少src/main/java目录,以及两个test目录.但是多了webapp目录,这个目录就等效于以前J ...
idea怎么创建python项目_idea创建django项目
1.环境.版本 os:windows10 ide:idea python:2.7 django:1.11.25 其他的python.django不确定这么弄会不会有其他问题. 2.python 官网下 ...
linux django创建项目,linux创建Django项目和部署
原文链接:https://blog.csdn.net/a249900679/article/details/51527200 中间有一点问题,不过也解决了,参考:https://www.cnblogs ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...

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

webpack 项目使用--创建webpack 项目（1）相关推荐

最新文章

热门文章