使用webstorm+webpack構建簡單入門級「HelloWorld」的應用&&引用jquery來實現alert

時間 2019-11-21

標籤使用 webstorm+webpack webstorm webpack 構建簡單入門 helloworld 應用引用 jquery 實現 alert 欄目 Storm 简体版

原文原文鏈接

使用webstorm+webpack構建簡單入門級「HelloWorld」的應用&&構建使用jquery來實現html

1、首先你本身把webstorm安裝完成。node

請參考這篇文章進行安裝和破解http://www.cnblogs.com/chengxs/p/6245281.htmljquery

2、而後須要你的電腦安裝了node.js。webpack

能夠參考這篇文章http://www.cnblogs.com/chengxs/p/6221393.htmlweb

2、第一種方法：使用命令行窗口。能夠在你要建立項目的文件夾裏進行全局安裝webpack和webpack-dev-server這兩個東西，webpack-dev-server這個好像是一個虛擬的服務器。npm

第二種方法（推薦）：使用webstorm自帶的terminal控制檯。編程

調出webstorm控制檯：alt+F12。瀏覽器

3、在進行2以後，文件夾裏回多一個node_modules文件夾，這個是須要的各類包。服務器

4、使用webstorm進行編程代碼實現「HelloWorld」webstorm

4.1新建一個index.html文件，

寫上：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello world</h1>
<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文件中，使用<script>標籤來引入bundle.js文件。

<script src="./bundle.js"></script>

4.4建立index.js文件

使用console.Log輸出‘hi’

/**

 * Created by  on 2017/1/5.

 */

document.addEventListener('DOMContentLoaded',function(){

    console.log('hi');

   });

4.5回到控制檯，輸入webpack，回車運行，就會生成bundle.js文件

4.6 在谷歌瀏覽器中安裝jetbrainIDE插件。

在你輸入webpack，回車後，webstorm下邊會出現下圖，你點擊就能夠進入到谷歌商城進行安裝插件和配置谷歌瀏覽器。（PS：須要你的電腦能夠上Google）

不會上Google的，能夠參考這篇文章：http://www.cnblogs.com/chengxs/p/6238466.html

4.6運行網頁，選中index.html，右鍵，選擇run「index.html」。

4.7查看谷歌瀏覽器控制檯。

此時查看谷歌瀏覽器控制檯（F12），輸出了hi

到這裏，就是使用webpack打包工具完成「HelloWorld」，生成輸出文件‘bundle.js’，經過index.config.js來告訴webpack入口地址是哪個文件，經過這個文件來提取全部的js文件和資源文件。

5、使用jquery實現點擊button彈出一個alert。

5.1先加入jquery，在webstorm控制檯輸入

npm i jquery --save

5.2在index.js文件中先引入jquery。

/**

 * Created by BFD-638 on 2017/1/5.

 */

var $=require('jquery');   //引入jquery

document.addEventListener('DOMContentLoaded',function(){

    console.log('hi');

    $('button').click(function(){alert('clicked')});   //在button上添加事件

});