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

1、前言

  • 閒暇時間,看了下前端的基礎知識,有幸參與了公司公衆號項目前面的一個階段,學習到了一些前端框架的相關知識
  • 小結了一下 本身練習經過新建一個個文件組織起項目的過程當中的一些理解

2、項目入口

  • vue 中
    • 一、首先 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 相關
    • 二、經過入口 js 來 引用 App.vue 組件
      • App.vue 是最外層的一層
      • App.vue 中常作的事
        • 設置全局的頁面滑動、切換動畫
        • 設置 <router-view/>
  • react 中
    • 一、首先 webpack 的 entry: 爲 app: './src/index.js' ,入口爲 js 文件
      • 在 webpack 打包後就會在 對應訪問的 html 文件裏引用 該 js 文件
      • 入口 js 的做用
        • 使用 ReactDom.render 方法 掛載 組件 到 當前文件夾下 index.html 中
      • 在入口 js 中常作的事
        • 配置 react-redux、redux-thunk 相關
        • 引入 reset.css
        • 引入 第三方 UI
        • 設置 rem 相關
    • 二、經過入口 js 來 引用 app.js 組件
      • app.js 是最外層的一層
      • app.js 中常作的事
        • 設置全局的頁面滑動、切換動畫 (react-addons-css-transition-group)
        • 設置路由 (react-router-dom )

3、webpack 多頁面配置

  • 參考了部分網上的寫法
  • 基於 glob 庫,獲得正確的 js 入口javascript

    // 得到入口 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, 配置 htmlcss

    // 獲取對應 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));
    
    });
相關文章
相關標籤/搜索