小记：vue 及 react 的工程项目入口小结及 webpack 配置多页面应用参考-CSDN博客

一、前言

闲暇时间，看了下前端的基础知识，有幸参与了公司公众号项目前面的一个阶段，学习到了一些前端框架的相关知识
小结了一下自己练习通过新建一个个文件组织起项目的过程中的一些理解

二、项目入口

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));

});

转载于:https://www.cnblogs.com/howie-ch/p/9521210.html