首頁 > 開發者 > 網站開發

webstorm+webpack建立項目

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：end   安裝   執行   style   sdn   targe   plugins   min   message   

http://blog.csdn.net/mafan121/article/details/71211922

 

1.使用webstrom建立一個空的項目

2.在項目下建立檔案夾和檔案

a.建立css檔案夾存放index.css檔案，檔案內容如下：

 

[css] view plain copy  print?
  1. p{  
  2.     font-size: 24px;  
  3.     padding:0 100px;  
  4.     color:blue;  
  5. }  
  6. p:nth-of-type(2) {  
  7.     font-size: 30px;  
  8.     text-align: center;  
  9.     color:black;  
  10.     font-family:"幼圓";  
  11. }  
  12. p:nth-of-type(3) {  
  13.     color: red;  
  14.     font-weight:bold;  
  15.     text-align: right;  
  16. }  


b.建立index檔案夾，存放index.html檔案，檔案內容如下：

 

 

[javascript] view plain copy  print?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>myFirstDemo</title>  
  6. </head>  
  7. <body>  
  8. <div id="app"></div>  
  9. <script src="bundle.js"></script>  
  10. </body>  
  11. </html>  


c.建立data檔案夾存放index.json檔案，檔案內容如下：

 

 

[javascript] view plain copy  print?
  1. {  
  2.   "name":"hello webpack",  
  3.   "content":"this is my first demo",  
  4.   "start":"Ready Go!"  
  5. }  


d.建立jsproject檔案夾存放createdom.js和entry.js檔案。

 

entry.js

 

[javascript] view plain copy  print?
  1. require(‘./../css/index.css‘);  
  2. var createdom = require(‘./createdom.js‘);  
  3. document.getElementById(‘app‘).appendChild(createdom());  

 

 

createdom.js

 

[javascript] view plain copy  print?
  1. var message=require(‘./../data/index.json‘);  
  2. module.exports = function() {  
  3.     var greet=document.createElement(‘div‘);  
  4.     greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>";  
  5.     return greet;  
  6. };  




 

3.命令操作

在webstorm的Terminal視窗執行如下命令：

 

a.產生依賴檔案package.json(預設會在根目錄下產生)
cnpm    init

 

b.依次安裝相關依賴（安裝後項目根目錄下會出現node_modules檔案夾，下麵包含下載的依賴）

(1)cnpm intsall webpack -g

(2)cnpm install --save-dev webpack

(3)cnpm install --save-dev css-loader

(4)cnpm install --save-dev style-loader

(5)cnpm install --save-dev json-loader

(6)cnpm install --save-dev webpack-dev-server

 

4.配置webpack.config.js檔案

在項目根路徑下建立webpack.config.js檔案，檔案內容為：

 

[javascript] view plain copy  print?
  1. var webpack = require(‘webpack‘);  
  2. module.exports = {  
  3.     //2、進出口檔案配置  
  4.     entry:__dirname+‘/jsproject/entry.js‘,//指定的入口檔案,“__dirname”是node.js中的一個全域變數，它指向當前執行指令碼所在的目錄  
  5.     output: {//輸出  
  6.         path: __dirname+‘/index‘,//輸出路徑  
  7.         filename: ‘bundle.js‘//輸出檔案名  
  8.     },  
  9.     module: {//在設定檔裡添加載入器說明，指明每種檔案需要什麼載入器處理  
  10.         loaders: [  
  11.             {//json載入器  
  12.                 test: /\.json$/,  
  13.                 loader: "json-loader"//注意-loader不能省略，網上說能省略，經測試編譯會報錯  
  14.             },  
  15.             {//5、編譯es6配置  
  16.                 test:/\.js$/,  
  17.                 exclude:/node_modules/,  
  18.                 loader:‘babel-loader‘,//在webpack的module部分的loaders裡進行配置即可  
  19.                 query:{  
  20.                     presets:[‘es2015‘,‘react‘]  
  21.                 }  
  22.             },  
  23.             {//3、CSS-loader  
  24.                 test:/\.css$/,  
  25.                 loader:‘style-loader!css-loader‘//添加對樣式表的處理  
  26.             }  
  27.   
  28.         ]  
  29.     },  
  30.     //4、伺服器依賴包配置  
  31.     devServer: {//注意：網上很多都有colors屬性，但是實際上的webpack2.x已經不支援該屬性了  
  32.         contentBase: "./index",//本機伺服器所載入的頁面所在的目錄  
  33.         historyApiFallback: true,//不跳轉  
  34.         inline: true//即時重新整理  
  35.         //hot：true,//不要書寫該屬性，否則瀏覽器無法自動更新  
  36.         //publicPath："/asses/",//設定該屬性後，webpack-dev-server會相對於該路徑  
  37.     },  
  38.     plugins:[]//外掛程式  
  39. }  


此時的檔案目錄為：

 

 

5.啟動服務

在Terminal中輸入：

webpack

執行完成後，輸入：

webpack-dev-server

 

然後在瀏覽器中輸入：http://localhost:8080/

此時可以看到效果了，而且更新代碼。瀏覽器也會即時重新整理。

webstorm+webpack建立項目

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More