使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&

发布时间：2020-12-14 23:52:26 所属栏目：资源来源：网络整理

导读：使用webstorm+webpack构建简单入门级“HelloWorld”的应用构建使用jquery来实现 1 、首先你自己把webstorm安装完成。请参考这篇文章进行安装和破解 ? 2 、然后需要你的电脑安装了node.js。可以参考这篇文章 ? 2 、第一种方法：使用命令行窗口。可以在你要

使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现

1、首先你自己把webstorm安装完成。

请参考这篇文章进行安装和破解

2、然后需要你的电脑安装了node.js。

可以参考这篇文章

2、第一种方法：使用命令行窗口。可以在你要创建项目的文件夹里进行全局安装webpack和webpack-dev-server这两个东西，webpack-dev-server这个好像是一个虚拟的服务器。

第二种方法（推荐）：使用webstorm自带的terminal控制台。

调出webstorm控制台：alt+F12。

3、在进行2之后，文件夹里回多一个node_modules文件夹，这个是需要的各种包。

4、使用webstorm进行编程代码实现“HelloWorld”

4.1新建一个index.html文件，

写上：

html>
<html lang="en">
<head>
??? <meta charset="UTF-8">
??? <title>Titletitle>
head>
<body>
<h1>Hello worldh1>
<button>提交button>
body>
html>

4.2新建一个webpack.config.js文件，(选择JavaScript类型)

/**

?* Created by ?on 2017/1/5.

?*/
module.exports={

??? entry:'./index.js',?? //我们告诉webpack，入口文件是：index.js,。webpack根据这文件来提取所有js和其他资源文件

??? output:{

??????? // path:_dirname,

??????? filename:'bundle.js'?? //打包输出的文件是bundle.js

??? }

};

4.3然后来修改index.html文件

在index.html文件中，使用

使用webstorm+webpack构建简单入门级“HelloWorld”的应用&amp;&

使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&