使用webstorm+webpack構建簡單入門級“HelloWorld”的應用&&構建使用jquery來實現
1、首先你自己把webstorm安裝完成。
請參考這篇文章進行安裝和破解http://www.cnblogs.com/chengxs/p/6245281.html
2、然后需要你的電腦安裝了node.js。
可以參考這篇文章http://www.cnblogs.com/chengxs/p/6221393.html
2、第一種方法：使用命令行窗口。可以在你要創建項目的文件夾里進行全局安裝webpack和webpack-dev-server這兩個東西，webpack-dev-server這個好像是一個虛擬的服務器。
第二種方法（推薦）：使用webstorm自帶的terminal控制臺。
調出webstorm控制臺：alt+F12。
3、在進行2之后，文件夾里回多一個node_modules文件夾，這個是需要的各種包。
4、使用webstorm進行編程代碼實現“HelloWorld”
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上添加事件
});
5.3在webstorm中控制臺中輸入webpack，運行，刷新頁面。
alert出現說明成功。
6、在webstorm控制臺使用webpack-dev-server命令，時刻檢測所有文件變化，從新輸出bundle.js。
每一次都要運行webpack，然后刷新，感覺很煩。但是webpack提供命令“webpack-dev-server”，這個命令會時刻監控所有文件變化，從新輸出bundle.js。
文章列表
留言列表
