小記：vue 及 react 的工程項目入口小結及 webpack 配置多頁面應用參考

一、前言

• 閑暇時間，看了下前端的基礎知識，有幸參與了公司公眾號項目前面的一個階段，學習到了一些前端框架的相關知識
• 小結了一下 自己練習通過新建一個個文件組織起項目的過程中的一些理解

二、項目入口

• vue 中

  • 1、首先 webpack 的 entry: 為 app: './src/index.js' ，入口為 js 文件
    • 在 webpack 打包后就會在 對應訪問的 html 文件里引用 該 js 文件
    • 入口 js 的作用
      • 初始化的一個全局的 vue 實例，使用實例的 render 方法，掛載 App.vue 組件到當前文件夾下路徑下的 index.html 中 (多頁面應用中可以是其他文件名，一般跟 js 文件名一致，路徑由 webpack 中配置的來控制)
    • 在入口 js 中常做的事
      • 掛載 store
      • 掛載 路由 (VueRouter)
      • 設置 filter
      • 掛載全局變量如網絡請求相關 Vue.prototype.$http = axios
      • 引入 reset.css
      • 引入 第三方 UI
      • 設置 rem 相關
  • 2、通過入口 js 來 引用 App.vue 組件
    • App.vue 是最外層的一層
    • App.vue 中常做的事
      • 設置全局的頁面滑動、切換動畫
      • 設置 <router-view/>

• react 中

  • 1、首先 webpack 的 entry: 為 app: './src/index.js' ，入口為 js 文件
    • 在 webpack 打包后就會在 對應訪問的 html 文件里引用 該 js 文件
    • 入口 js 的作用
      • 使用 ReactDom.render 方法 掛載 組件 到 當前文件夾下 index.html 中
    • 在入口 js 中常做的事
      • 配置 react-redux、redux-thunk 相關
      • 引入 reset.css
      • 引入 第三方 UI
      • 設置 rem 相關
  • 2、通過入口 js 來 引用 app.js 組件
    • app.js 是最外層的一層
    • app.js 中常做的事
      • 設置全局的頁面滑動、切換動畫 (react-addons-css-transition-group)
      • 設置路由 (react-router-dom )

三、webpack 多頁面配置

• 參考了部分網上的寫法

• 基於 glob 庫，得到正確的 js 入口

  // 獲得入口 js 文件
  let entries = getEntry('./src/pages/**/*.js', './src/pages/'); 
   
  
  // getEntry 方法
  function getEntry(globPath, pathDir) {
    let files = glob.sync(globPath)
    let entries = {},
      entry,
      dirname,
      basename,
      pathname,
      extname
    for (let i = 0; i < files.length; i++) {
      entry = files[i]
      dirname = path.dirname(entry)
      extname = path.extname(entry)
      basename = path.basename(entry, extname)
      pathname = path.normalize(path.join(dirname, basename))
      pathDir = path.normalize(pathDir)
      if (pathname.startsWith(pathDir)) {
        pathname = pathname.substring(pathDir.length)
      }
      entries[pathname] = ['./' + entry]
    }
    return entries
  }
  

• 獲取對應 html, 配置 html

  // 獲取對應 html 
  let pages = Object.keys(getEntry('./src/pages/**/*.html', './src/pages/'))
  
  
  // 利用 HtmlWebpackPlugin 配置 html
  pages.forEach(function (pathname) {
    // 配置生成的 html 文件，定義路徑等，可根據最終打包的文件要求進行修改
    let page = pathname
    if (pathname.search('/') != -1) {
      page = pathname.split('/').pop()
    }
  
    // config 對象
    let config = {
      // html 名字 The file to write the HTML to. Defaults to index.html
      filename: page + '.html', 
  
      // 模板路徑
      // html-withimg-loader! 處理 html，以支持直接在html中使用img的src加載圖片
      template: 'html-withimg-loader!' + 'src/pages/' + pathname + '.html',
  
      // js 插入位置 When passing true or 'body' all javascript resources will be placed at the bottom of the body element
      inject: true, 
  
      // html 壓縮處理
      minify: { 
        // removeComments 移除頁面注釋，默認為true
        removeComments: true,
  
        //collapseWhitespace 移除空格、回車、換行符等符號，默認為true
        collapseWhitespace: false
      }
      // favicon: 'path/to/yourfile.ico'
    };
  
    if (pathname in module.exports.entry) {
  
      // chunks 默認會在生成的 html 文件中引用所有的 js 文件，當然你也可以指定引入哪些特定的文件
      // vendors 為第三方庫，common 為公共的模塊部分，pathname 和 entry 對應
  
      config.chunks = ['common', pathname];
      
  
      // 給生成的 js 文件一個獨特的 hash 值，如 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
  
      config.hash = false;  
    }
  
    // 在遍歷中配置 (需要生成幾個 html 文件，就配置幾個 HtmlWebpackPlugin 對象)
    module.exports.plugins.push(new htmlWebpackPlugin(config));
  
  });