小记：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));
  
  });