webstorm+webpack建立項目

時間  2019-11-20
標籤 webstorm+webpack webstorm webpack 建立 項目 欄目 Storm 简体版
原文   原文鏈接

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

 

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

2.在項目下建立文件夾和文件

a.建立css文件夾存放index.css文件，文件內容以下：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文件，文件內容以下：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文件，文件內容以下：java

 

 

[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文件。node

 

entry.jsreact

 

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

 

 

createdom.jswebpack

 

[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窗口執行以下命令：es6

 

a.生成依賴文件package.json(默認會在根目錄下生成)
cnpm    initweb

 

b.依次安裝相關依賴（安裝後項目根目錄下會出現node_modules文件夾，下面包含下載的依賴）npm

(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.     //二、進出口文件配置  
  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.             {//五、編譯es6配置  
  16.                 test:/\.js$/,  
  17.                 exclude:/node_modules/,  
  18.                 loader:'babel-loader',//在webpack的module部分的loaders裏進行配置便可  
  19.                 query:{  
  20.                     presets:['es2015','react']  
  21.                 }  
  22.             },  
  23.             {//三、CSS-loader  
  24.                 test:/\.css$/,  
  25.                 loader:'style-loader!css-loader'//添加對樣式表的處理  
  26.             }  
  27.   
  28.         ]  
  29.     },  
  30.     //四、服務器依賴包配置  
  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/

此時能夠看到效果了，並且更新代碼。瀏覽器也會實時刷新。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程