一、前言

　　之前介紹了webpack+react+redux+es6開發模式?，這個項目對于一個獨立的功能節點來說是沒有問題的。假如伴隨著源源不斷的需求，前段項目會涌現出更多的功能節點，需要獨立部署運行。為了更好地管理這些獨立的功能節點，我們需要利用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_ENV==='prod') {//生產環境options.publicPath = '/project1-front'; }else if(process.env.NODE_ENV==='test') {//測試環境//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_ENV=prod&&webpack --display-error-details --progress --colors -p --config config.project1.js

　　這個命令中設置了環境變量 NODE_ENV=prod，根據這個變量的配置，會有不同的 服務端產出路徑 的配置。例如， config.project1.js中的示例代碼，如下。

//服務端產出路徑 if(process.env.NODE_ENV==='prod') {//生產環境options.publicPath = '/project1-front'; }else if(process.env.NODE_ENV==='test') {//測試環境//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 version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"><display-name>project1-front</display-name><welcome-file-list><welcome-file>index.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）和不是懶加載方式（project2）build之后產生文件的差異。

　　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?invariant=130&args[]=object&args[]= 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

總結

以上是生活随笔為你收集整理的webpack+react+redux+es6开发模式---续的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。