首页 > 代码库 > webstorm+webpack创建项目

webstorm+webpack创建项目

2024-10-13 02:17:02   213人阅读

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=http://www.mamicode.com/"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创建项目


联系
我们