码迷，mamicode.com
首页 > Web开发 > 详细

webstorm+webpack创建项目

时间：2017-06-28 09:21:03      阅读：406      评论：0      收藏：0      [点我收藏+]

标签：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创建项目

标签：end   安装   执行   style   sdn   targe   plugins   min   message   

原文地址：http://www.cnblogs.com/callmeguxi/p/7088168.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！