前端小结----Webpack&React
现在的工作是一个Java工程师，偶尔会有些小想法，自己动手实践玩玩，没有页面总是不太爽的，所以也就多多少少自学了点前端(JS真心不是一门好语言，一个this和一个原型链就够折腾了，我已经忘得差不多了，得回去补补课了)。没有参与过公司正规的前端项目，非专业前端。
最近选了时下很流行的React玩了玩，工欲善其事必先利其器，自从node出来后，各种工具一个接一个，gulp,
browserify, webpack，作为前端菜鸟，就选了个网上觉得比较新比较好的Webpack来作为构建工具。
这几篇Webpack入门文章写的很不错，傻瓜式，一步步来就可以了。挺简单的，配个entry,
output，再加些plugins, 加些loader就&差不多够用了，依赖都是用npm来管理的。
React入门的话，过两遍官方文档应该差不多了，&. 关于React，几个关键的概念理解后自己写了个简单的页面，有些基本的交互。
Component:
React最大的好处就是组件编程嘛，对于那种公司后台用的系统，界面比较复杂的，我觉得React挺适合的。
JSX: JSX&is a JavaScript syntax
extension that looks similar to XML. 大概就是可以在JS里写HTML，然后又不是纯粹的HTML,
里面还可以嵌一些变量，表达式之类的。当然不用JSX也是可以写的，但读起来就比较累了，不那么直观，不像JSX那样，能够看到整个组件的HTML结构。怎么说呢，历史总是不断的重复却又不只是简单的重复，刚开始的时候，所有东西写在一起，后来分开，现在又整到一起了。这里有个要注意的地方，由于HTML里的class,
for等属性是JS里的关键字，所以在JSX里需要用className, forName代替。
用来在组件间传递数据的，这里的数据传递是单向的，只能从父组件向子组件传递。
用来管理组件状态的，通过setState改变状态后，组件会自动调用render函数重新渲染。其实state里面也可以放很多数据，那么什么时候用state，什么时候用props比较合适呢。官方两段话解释的很清楚。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/large/6af4ifggnnwqj21120g0tdt.jpg"
ALT="前端小结----Webpack&React"
TITLE="前端小结----Webpack&React" />
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/large/6af4ifg5n4glj211q0h8jx9.jpg"
ALT="前端小结----Webpack&React"
TITLE="前端小结----Webpack&React" />
render函数：这是React里面很关键的一个函数，这个里面就是用户写的组件的结构，用于渲染整个组件，在state发生改变后，该函数会被自动调用。
事件响应：组件内的事件响应很简单，比如鼠标点击事件，加个onClick=XXXFunction然后在XXXFunction里响应就可以了。但是如果父组件需要知晓子组件的事件怎么办呢，父组件可以通过props传递个callback函数给子组件，这样就可以处理子组件的事件了。但如果组件的层级比较多，这种方式感觉也挺恶心的，不知道Flux,
Redux这些东西是不是来解决这个问题的，还没了解，后面马上要开始学Redux了，Common On.
关于React，这一周利用业余时间学的就这么多了，也写了两个个简单的页面，有个拖动的操作删除的还没搞定。下周开始看看Redux，看它是用来解决什么痛点的，然后把现在两个页面优化一下。然后着手把后端的写好，后端比较简单，哈哈。最后可能再看看蚂蚁的Ant
Design.&如果有前端高手看到文章觉得我还凑合，能带我一起耍吗。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。09:30:52 UTC
我一直是使用java+jquery在做前后端开发，目前angularjs、reactjs概念太火就想学习一下，从而也接触到了前端打包工具webpack。在学习过程中发现一个问题，我是结合java来开发后端的，发现在中用npm安装的modules都位于java工程的webapp下，如图：这样我在用tomcat跑应用的时候打包巨慢，因为会把node_modules目录下的东西也打包进去，所以我想问问webpack能不能设定node_modules到其他目录呢？还是一定要放在webpack.config.js及package.json同一个目录下？
00:58:34 UTC
看下 webpack 的配置 resolve.root
和 resolve.modulesDirectories， 可以指定 node_modules 查找路径。不过建议 webpack 和前端源代码还是不要放在 webapp 下。
09:08:55 UTC
我也遇到这个问题，如果解决了，望解答一下！谢谢
00:59:20 UTC
这两个参数试过了，这两个参数的作用好像只是只是决定你开发中应用依赖的modules去哪找，并不决定像loaders的查找位置，所以不行。
01:00:13 UTC
目前还没解决，我想到一种方式是更改webpack的源码，还没实践，你解决了这个问题也来回复下我啊！
05:49:19 UTC
node.js 在当前路径找 node_modules，找不到的话，去上级目录查找，loader 那些依赖完全可以放到上级目录里。不过为什么要把源代码和 webpack 配置放到 webapp 目录下 呢？如果是前后端分离的实现，前端完全可以单独作为一个项目放置，当然也可以按照 maven 项目的规范，自己在 src/main 下再建个目录来放前端源代码。再利用些 maven 的插件，集成 webpack 打包。
08:59:36 UTC
如果前后端不分离呢？有没有什么解决办法？
09:09:19 UTC
可以试试这样，前端开发在单独的目录下面，把webpack输出的路径指定到java的项目目录里
09:37:07 UTC
一样的，就是不要把前端源代码放在 webapp 下。可以在 src/main 下新建个源代码路径，用于放置前端源代码，再找个地方放 webpack 配置就行了，例如下面这样的配置：
javascript 这里放置前端源代码
webpack 这里放置 webpack 配置
webpack.dev.config.js
webpack.prod.config.js
assets 这里放置 webpack 打包生成的文件
package.json
pom.xml 可以配置插件 frontend-maven-plugin， 便于maven 打包运行 webpack 构建。再配置下 maven 的 war 包插件，将生成的打包文件（上面配置的是 target/assets）包含进 war 包里就行啦。
配置很灵活，根据自己需要配置就行了。
09:49:52 UTC
嗯，我试试
02:05:09 UTC
另外我还想问下，package.json这个位置有讲究么？对node不熟悉，我看这个配置没有什么路径，是不是可以随意放呢？webpack中是什么意思？有什么用？如何用_百度知道ERROR in %1 is not a valid Win32 application.\\?\E:\workspaces\gallery-by-react\node_modules\node-sass\vendor\win32-x64-46\binding.node @ ./src/styles/App.scss 4:14-186 13:2-17:4 14:20-192webpack: bundle is now VALID.
The way ahead is a long l...
修改css和scss的loader {
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}'
test: /\.scss/,
loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}!sass-loader?outputStyle=expanded' }
你还没有登录，请先登录或注册慕课网帐号
46914人关注
25055人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2还记得两年前刚来公司才几个月，经理就安排我去做JS地图相关的维护和开发工作，然后就跟着一个公司老鸟（没俩月他离职了）熟悉地图相关的功能。
本人嘛，那会前端JS实际开发经验也才几个月，然后当我看见公司地图的上万行源代码，可想而知，直接懵逼。但是没办法呀，只能坚持去慢慢看，来来回回的找引用关系，熟悉每个模块方法实现的功能，于是乎，从那之后，我感觉什么一两千行代码都是 so easy。
言归正传，正是在于这种情况下，在业务复杂的时候，相对应的代码量会很多，上万行的代码也不再是梦，但是这种情况下，在后期维护的过程中，是很不方便的，因此在最近尝试新版本的开发，采用webpack进行打包发布
webpack介绍：在开发过程中，我们可以利用模块化开发（CMD模式），将一个大型的功能按不同的小功能，拆分成不同的模块（文件），这样在以后的维护中，我们可以针对不同的功能进行维护，不至于在一个上万行的文件中，找来找去，而且当一个文件很大的时候，电脑不好的在查看，修改的时候会很卡，也不利于工作效率，因此产生了模块化开发这个概念；而webpack正是将模块化进行打包发布处理的一个工具
常见模块化开发规范：CMD（seaJS）& AMD（requireJS...）
一、webpack环境搭建1.webpack安装
首先需要安装nodeJS，先在nodeJS官网下载，进行NodeJS安装
下载地址&& https://nodejs.org/en/download/
下载完毕后，进行安装，一切都以默认的选择即可
安装完毕后，打开cmd工具，输入命令
等待安装完毕
3.webpack安装
cmd工具中，输入命令&
执行命令安装webpack
到此webpack安装完毕，可以使用
webpack -h
来查看版本号
到此，webpack安装完成
二、webpack打包
1. 打开cmd工具，进入你的开发文件夹，其中此文件夹必须包含webpack.config.js文件，config配置参考如下
var webpack = require("webpack")
module.exports = {
"mcDemoMain": "./mcDemoMain.js"//直接require进来的文件会直接打包到这个文件中，如require('./common/Enum')，延迟加载的文件则不会，如require("bundle?lazy&name=demo!./demo/demo1")
path: "../../dist/demo/1.0",//设置打包后的js的输出位置
filename: "[name].js",//和入口文件的名字相同
chunkFilename: "[name].young.js",//值模块里需要单独打包的文件
require.ensure
//path: path.join(__dirname, 'static/js/app/dist'),
//设置打包后的js的输出位置
//filename: "[name].[hash].js",
//和入口文件的名字相同
publicPath: "[sDomain]static/dist/demo/1.0/" //浏览器会从这个目录开始查找模块
loaders: [
//{ test: /\.css$/, loader: "style!css" },
//{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: 'es2015' } },
plugins: [
new webpack.BannerPlugin('文件顶部注释说明'),
// new webpack.IgnorePlugin(/\.\/AsnyModuleA.js$/),//排除不想打包进去的插件
//new webpack.ProvidePlugin({ //这是把jquery挂到全局上，不用每个模块都去require
"AsnyModuleA": '../../../dist/demo/AsnyModuleA.js',
//new monsChunkPlugin('common.js') //有多个入口文件的话提取公共部分，利用浏览器缓存 然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来:
, resolve: {
//modulesDirectories: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',//["C:\Users\Administrator\AppData\Roaming\npm\node_modules"],
//root: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',
//jquery: path.join(__dirname, 'dev/jquery/jquery.js'),
//AsnyModuleA: "../../../dist/demo/start/commom/AsnyModuleA.js", //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')
//'../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名
//externals: {
'AsnyModuleA': 'AsnyModuleA'
2.cmd进入开发目录后，输入
就可以进行打包了，如果显示以下则表示成功
sDomain为动态URL路径地址，下次更新sDomain动态路径配置的问题【原创文章，转载请尊重原作者】
阅读(...) 评论()