1使用webstrom创建一个空的项目
2在项目下创建文件夹和文件
a创建css文件夹存放indexcss文件，文件内容如下：
[css] view plain copy
p{
font-size: 24px;
padding:0 100px;
color:blue;
}
p:nth-of-type(2) {
font-size: 30px;
text-align: center;
color:black;
font-family:"幼圆";
}
p:nth-of-type(3) {
color: red;
font-weight:bold;
text-align: right;
}
b创建index文件夹，存放indexhtml文件，文件内容如下：[javascript] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myFirstDemo</title>
</head>
<body>
<div id="app"></div>
<script src="bundlejs"></script>
</body>
</html>
c创建data文件夹存放indexjson文件，文件内容如下：[javascript] view plain copy
{
"name":"hello webpack",
"content":"this is my first demo",
"start":"Ready Go!"
}
d创建jsproject文件夹存放createdomjs和entryjs文件。
entryjs
[javascript] view plain copyrequire('//css/indexcss');
var createdom = require('/createdomjs');
documentgetElementById('app')appendChild(createdom());
createdomjs[javascript] view plain copyvar message=require('//data/indexjson');
moduleexports = function() {
var greet=documentcreateElement('div');
greetinnerHTML="<p>"+messagename+"</p>"+"<p>"+messagecontent+"</p>"+"<p>"+messagestart+"</p>";
return greet;
};
3命令 *** 作
在webstorm的Terminal窗口执行如下命令：
a生成依赖文件packagejson(默认会在根目录下生成)
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配置webpackconfigjs文件
在项目根路径下创建webpackconfigjs文件，文件内容为：
[javascript] view plain copyvar webpack = require('webpack');
moduleexports = {
//2、进出口文件配置
entry:__dirname+'/jsproject/entryjs',//指定的入口文件,“__dirname”是nodejs中的一个全局变量，它指向当前执行脚本所在的目录
output: {//输出
path: __dirname+'/index',//输出路径
filename: 'bundlejs'//输出文件名
},
module: {//在配置文件里添加加载器说明，指明每种文件需要什么加载器处理
loaders: [
{//json加载器
test: /\json$/,
loader: "json-loader"//注意-loader不能省略，网上说能省略，经测试编译会报错
},
{//5、编译es6配置
test:/\js$/,
exclude:/node_modules/,
loader:'babel-loader',//在webpack的module部分的loaders里进行配置即可
query:{
presets:['es2015','react']
}
},
{//3、CSS-loader
test:/\css$/,
loader:'style-loader!css-loader'//添加对样式表的处理
}
]
},
//4、服务器依赖包配置
devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2x已经不支持该属性了
contentBase: "/index",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
//hot：true,//不要书写该属性，否则浏览器无法自动更新
//publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径
},
plugins:[]//插件
}
此时的文件目录为：
5启动服务
在Terminal中输入：
webpack
执行完成后，输入：
webpack-dev-server
然后在浏览器中输入：>
此时可以看到效果了，而且更新代码。浏览器也会实时刷新。
原理是这样的 svn服务器一般放在公共的服务器上，大家连这个服务器，在MyEclipse上使用svn控件 可以下载svn上的项目至本地，所以很多公司将开发要用到的软件都放在svn上，有同事来只要连上svn 就可以把需要的东西下下来了更新是指 服务器上变动了的 而你本地没有变动，需要你更新，
提交是指 服务器上没有的，也就是你改过的东西，你需要将代码提交，其他同事更新你的代码
同步，是在更新提交之前做的工作，更新提交前先同步，可以知道哪些东西要提交哪些东西要更新，哪些东西是冲突的（你和同事 改了同一个文件，可能会出现冲突），出现冲突不能提交也不能更新，只有先将冲突的文件选择用本地的文件覆盖或用服务器的文件覆盖本地后才能更新或提交，具体的用法还需要楼主多实践，这东西用过一次就会了
上面术语在MyEclipse里的选项是
同步：synchronize with repository (如果你的项目连了svn 右键你的项目 team就能看到)
点击同步后会进入到synchronize 的界面 再右键项目就有
commit 提交
update更新
Mark as mergerd （冲突时点它 冲突的文件会用本地的覆盖服务器的，意思就是说 用你的！）
override and update (冲突时 右键文件 选此项表示 用服务器的！)在使用webstorm过程中，使用某张的绝对路径始终显示不出来，比如：显示不出来，设置相对路径就可以显示了。在webstorm中，它帮你虚拟了一个服务器（可以认为在此虚拟服务器外的文件相当于在另一个电脑里），因此你点击webstorm右上角的浏览器图标打开网页时，网页路径是localhost:而你的也显示不出来；你可以摁住Shift再点击右上浏览器图标使用本地打开的方式，此时打开的网页路径是file:///，这时候你的应该就能显示出来了。望采纳
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）