网站产品管理模块,wordpress织梦,沈阳公司网站设计,重庆市建设银行网站一、前言 之前介绍了webpackreactreduxes6开发模式 #xff0c;这个项目对于一个独立的功能节点来说是没有问题的。假如伴随着源源不断的需求#xff0c;前段项目会涌现出更多的功能节点#xff0c;需要独立部署运行。为了更好地管理这些独立的功能节点#xff0c;我们需要… 一、前言 之前介绍了webpackreactreduxes6开发模式 这个项目对于一个独立的功能节点来说是没有问题的。假如伴随着源源不断的需求前段项目会涌现出更多的功能节点需要独立部署运行。为了更好地管理这些独立的功能节点我们需要利用webpack进行单独的打包处理针对不同的功能节点生成不同的配置文件 二、项目结构 1.项目demo目录图片示例 2.apps目录图片示例project1和project2分别表示两个不同的功能节点 三、npm-scripts 命令 package.json部分示 接下来会说明下每个命令的用途。 四、webpack的dll功能 Dll是Webpack最近新加的功能, 我简单介绍一下。 Dll就是一个纯纯的依赖库它本身不能运行是用来给你的app引用的。 打包dll的时候Webpack会将所有包含的库做一个索引写在一个manifest文件中而引用dll的代码dll user在打包的时候只需要读取这个manifest文件就可以了。 这么一来有几个好处 Dll打包以后是独立存在的只要其包含的库没有增减、升级hash也不会变化因此线上的dll代码不需要随着版本发布频繁更新。 App部分代码修改后只需要编译app部分的代码dll部分只要包含的库没有增减、升级就不需要重新打包。这样也大大提高了每次编译的速度。 假设你有多个项目使用了相同的一些依赖库它们就可以共用一个dll。 1.webpack.config.js中关于Dll的配置如下 webpack.DllPlugin 的选项中 path 是manifest文件的输出路径 name 是dll暴露的对象名要跟 output.library 保持一致 context 是解析包路径的上下文这个要跟接下来配置的dll user一致。 如何进行打包呢接下来就会用到上面提到的scripts命令package.json文件中。这里要说的命令是dll project1对应的命令如下。 webpack --display-error-details --progress --colors -p --config config.project1.dll.js 该命令会加载config.project1.dll.js对应的配置内容如下 var config require(./webpack.config);
module.exports config.webpackdll({key:project1//根目录,rootPath:__dirname
}); 执行npm run dll project1命令会输出两个文件一个是打包好的vendor.dll.js一个就是manifest-vendor.json。由于在config.project1.dll.js中配置的key值是功能节点的名称project1所以生成的两个文件在apps/project1目录下如下图所示。 其中manifest-vendor.json大致的样子如下图所示。 Webpack将每个库都进行了编号索引之后的dll user可以读取这个文件直接用id来引用。文件内容中的name对应的值dll_vendor 就是 webpack.config.js中关于Dll的配置中 DllPlugin 中关于 name值的配置如下所示。 new webpack.DllPlugin({path: options.manifestPath||apps/key/manifest-[name].json,//manifest.json 文件的输出路径这个文件会用于后续的业务代码打包name: options.manifestName||dll_[name],// dll 暴露的对象名要跟 output.library 保持一致context: options.manifestContext||rootPath,//解析包路径的上下文这个要跟接下来配置的 webpack.config.js 一致
}), 2.关于Dll user的配置 DllReferencePlugin 的选项中 context 需要跟之前保持一致这个用来指导Webpack匹配manifest中库的路径 manifest 用来引入刚才输出的manifest文件。 参考http://www.tuicool.com/articles/NZ77re 五、开发环境 开发人员开发项目的时候使用 webpack devserver 启动项目。这里接着说一个命令dev-project1, 如下。 webpack-dev-server --devtool eval --display-error-details --progress --colors --hot --inline --config config.project1.js config.project1.js的配置内容如下。 var config require(./webpack.config);
//打印启动信息
config.initPrint(__filename);
var path require(path);
var cwd process.cwd();//返回运行当前脚本的工作目录的路径
var baseRoot ./apps/project1/src/
var options {//定义标识名(如果有多个应用可以写成 应用的名称)key : project1,//定义各模块的入口modules : {bundle: ./project1-index.js//入口}//根目录,rootPath:__dirname//webpack-dev-server启动的端口,port:8000//相对路径//,path: path.join(__dirname, )//编译后的路径//,filename: [name]/build/bundle.js//定义各种加载器//,loaders: []//定义各种插件//,plugins:[]//定义路径别名即:require(alias), alias: {styles: path.join(cwd, baseRoot styles),less: path.join(cwd, baseRoot styles/less),actions: path.join(cwd,baseRoot actions),constants: path.join(cwd, baseRoot constants),images: path.join(cwd, baseRoot images),reducers: path.join(cwd, baseRoot reducers),stores: path.join(cwd, baseRoot stores),modules: path.join(cwd, baseRoot modules),components: path.join(cwd, baseRoot components),utils: path.join(cwd, baseRoot utils),routes: path.join(cwd, baseRoot routes),trd: path.join(cwd, baseRoot trd),}
}
//服务端产出路径
if(process.env.NODE_ENVprod) {//生产环境options.publicPath /project1-front;
}else if(process.env.NODE_ENVtest) {//测试环境//options.publicPath /icop-sampleapp-frontend;
}else{//本地开发环境
}//构建webpack配置
module.exports config.webpack(options); 配置中的注解写的很明确了就不在啰嗦了。关于webpack.config.js中的webpack方法配置如下。 执行 npm run dev-project1命令启动工程浏览器中输入“http://localhost:8000/apps/project1”效果如下。 六、生产环境 发布到生产环境上的程序是稳定的不允许开发人员直接操作。为了提升服务访问的效率前端工程放到了要tomcat工程下。tomcat项目下的代码还是我们开发人员所看到的的代码不是了已经最后我要说的命令就是 build-project1, 如下所示。 set NODE_ENVprodwebpack --display-error-details --progress --colors -p --config config.project1.js 这个命令中设置了环境变量 NODE_ENVprod根据这个变量的配置会有不同的 服务端产出路径 的配置。例如 config.project1.js中的示例代码如下。 //服务端产出路径
if(process.env.NODE_ENVprod) {//生产环境options.publicPath /project1-front;
}else if(process.env.NODE_ENVtest) {//测试环境//options.publicPath /icop-sampleapp-frontend;
}else{//本地开发环境
} 那么本地开发环境中对应的这个路径是啥呢webpack.config.js中的webpack方法中有这样的配置如下。 output: {path: options.path || path.join(rootPath, apps/key)//编译后的输出路径, filename: options.filename || /build/bundle.js, publicPath: options.publicPath || /apps/key//服务端的路径, chunkFilename: /build/[name]_[hash].chunk.js
}, 也就是默认的publicPath是/apps/project1因为传递的key值是 project1。执行命令npm run build-project1, 会在project1目录下生成 build文件夹内如如下。 这些打包出来的文件是 tomcat中对应项目需要的。并且前端项目 project1中index.html也引入了其中的一些文件如下所示。 如何把我们前端项目 发布到 tomcat上呢很简单的新建一个web工程工程的名称要注意 要和 生产环境对应的 服务器产出路径一致即 project1-front。web.xml做一下简单配置如下。 ?xml version1.0 encodingUTF-8?
web-app xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xmlnshttp://xmlns.jcp.org/xml/ns/javaee xsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd idWebApp_ID version3.1display-nameproject1-front/display-namewelcome-file-listwelcome-fileindex.html/welcome-file/welcome-file-list
/web-app 接下把前端项目功能节点project1目录下面的文件不包含src目录copy到刚刚新建的web项目project1-front中的 WebContent 目录下如下所示。 最后启动web工程浏览器中输入http://localhost:8029/project1-front效果如下。 七、webpack的CommonsChunkPlugin提取公共代码以及懒加载方式 相关链接http://webpack.github.io/docs/long-term-caching.html 在webpack.config.js中webpack方法对应的配置如下所示。 路由各个功能节点的引入方式变成如下。 比较一下使用懒加载方式project1和不是懒加载方式project2build之后产生文件的差异。 apps/project1/build目录 apps/project2/build目录 很明显懒加载方式可以更好的解决性能问题加快页面加载速度。不同的功能模块加载对应的chunk文件就可以了。 八、nodejs中exports与module.exports的区别 http://cnodejs.org/topic/5231a630101e574521e45ef8 http://zihua.li/2012/03/use-module-exports-or-exports-in-node/ http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632 http://www.cnblogs.com/pigtail/archive/2013/01/14/2859555.html 九、教训 开始用懒加载模式的时候启动工程出现如下错误。 vendor.dll.js:1 Uncaught Invariant Violation: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant130args[]objectargs[] for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 找了好长时间的原因竟然是有一个js文件的导出方式的问题如下。 然而懒加载的时候使用的require。这也就是为啥 import可以require不行的原因了。坑了我好久啊 试了一下要改成 module.exports ModuleRouters。这样才不会报错。 十、项目下载地址 https://github.com/hjzgg/webpack-react-redux-next 十一、项目演示地址 http://study.hujunzheng.cn:8000/DEMO_FRONT 转载于:https://www.cnblogs.com/hujunzheng/p/6294954.html
