web前端项目搭建说明
本文由发表于2年前 | web前端 | 暂无评论 |  被围观 1,077 views+

Author: ChinSyun Pang
Weibo: http://weibo.com/arthinkingplus

项目地址:app-mis

安装webpack:

$ npm install webpack -g

关于npm install

初始化项目:

$ npm init

执行完这步会在目录下生成package.json文件

为项目安装webpack:

$ npm install webpack --save-dev

或者安装特定的版本:

$ npm install webpack@1.2.x --save-dev

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

--save-dev 与 --save的区别

--save-dev: Package will appear in your devDependencies.
seeGrunt.js: What does -save-dev mean in npm install grunt --save-dev

安装webpack调试工具:

$ npm install webpack-dev-server --save-dev

启动webpack-dev-server:

$ webpack-dev-server --inline --hot

webpack-dev-serverwebpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端,客户端根据消息作出响应。

webpack构建命令:

$ webpack --display-modules
$ webpack --display-modules --display-chunks

--display-modules 和 --display-chunks的作用

by default Webpack hides modules that are not yours. To see all the modules compiled by Webpack, we can pass the --display-modules flag.

run webpack with the --display-chunks flag to see what modules are in which chunks.

安装需要的模块:

lodash

npm install --save lodash

lodash是一个Javascript工具库。

安装babel:

$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev

然后在文件目录下创建 .babelrc 文件。详细配置参考:babel

  • babel是一个Javascript代码转换器,可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaScript 引擎中。

安装eslint:

$ npm install eslint eslint-loader babel-eslint eslint-plugin-react --save-dev

在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。在以前的项目中,我们选择 JSHint 和 JSCS 结合使用,使用 React JSX 语法时,却遇到了问题:JSHint 不支持 JSX 语法,以有了 ESLint。
eslint

安装react:

npm install react react-dom react-router --save

安装antd

npm install antd --save

安装需要的webpack loader:

$ npm install css-loader postcss-loader less-loader style-loader html-loader sass-loader node-sass --save-dev
$ npm install url-loader file-loader --save-dev
$ npm install baggage-loader --save-dev

loader配置说明:

require("./loader!./dir/file.txt");
// => uses the file "loader.js" in the current directory to transform
//    "file.txt" in the folder "dir".

require("jade!./template.jade");
// => uses the "jade-loader" (that is installed from npm to "node_modules")
//    to transform the file "template.jade"
//    If configuration has some transforms bound to the file, they will still be applied.

require("!style!css!less!bootstrap/less/bootstrap.less");
// => the file "bootstrap.less" in the folder "less" in the "bootstrap"
//    module (that is installed from github to "node_modules") is
//    transformed by the "less-loader". The result is transformed by the
//    "css-loader" and then by the "style-loader".
//    If configuration has some transforms bound to the file, they will not be applied.

安装需要的webpack plugin:

$ npm install clean-webpack-plugin --save-dev
$ npm install extract-text-webpack-plugin --save-dev
$ npm install html-webpack-plugin
  • clean-webpack-plugin: A webpack plugin to remove/clean your build folder(s) before building.
  • extract-text-webpack-plugin: It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css).
  • html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

参考:

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/web-project-setup-introduction-html.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2016 5/1
如果您有更好的原创技术博文或者观点,欢迎投稿:admin@itzhai.com,或者关注订阅左侧浮动面板的微信号订阅IT宅itread)发送消息。
文章评论
    没有评论
给我留言

有人回复时邮件通知我
web前端的相关文章
随机文章 本月热门 热评
1 hibernateTemplate.executeFind(new HibernateCallback())出现NullPointerException空指针的解决方法 2011/9/21
2 配置Maven项目自动编译 2014/12/9
3 ExtJS获取ComboBox远程数据的JsonReader和本地数据的ArrayStore的写法 2011/8/6
4 UML笔记 UML统一建模语言介绍 UML图形的基本绘制 2011/10/9
5 阅读开源项目源代码的方法 | IT宅编程分享 2012/2/16
6 代码中有99个bug 2014/7/14
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.